vgapp 1.4.9 → 1.5.0

package/app/modules/vgfiles/js/base.js

@@ -1,6 +1,6 @@
 /**
- * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
- * Возможности: управляет набором файлов, ошибками, списками, статистикой и скрытыми полями формы.
+ * Описание: базовая логика выбора, валидации и отображения файлов VGFiles.
+ * Возможности: управляет набором файлов, ошибками, списками, кастомными действиями, статистикой и скрытыми полями формы.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -422,7 +422,7 @@ class VGFilesBase extends BaseModule {
 		};
 	}
 
-	_renderUIDropList(files) {
+	_renderUIDropList(files) {
 		if (!this._nodes.drop) return;
 
 		let $list = Selectors.find(`.${this._getClass('drop-list')}`, this._nodes.drop);
@@ -435,9 +435,10 @@ class VGFilesBase extends BaseModule {
 		const fragment = document.createDocumentFragment();
 
 		files.forEach((file) => {
-			let classes = $itemsTemplateClasses;
+			let classes = [...$itemsTemplateClasses];
 
-			if (this._params.detach) classes.push('with-remove')
+			if (this._params.detach) classes.push('with-remove')
+			if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 			if (this._params.sortable.enabled) classes.push('with-sortable')
 			if (this._params.limits.count === 1) {
 				classes.push('single');
@@ -606,12 +607,13 @@ class VGFilesBase extends BaseModule {
 		return '';
 	}
 
-	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
+	_createInfoListItem(file, i, itemsTemplate, itemTemplateClasses, fileKey, signature) {
 		let classes = [...itemTemplateClasses];
 
 		if (this._params.image) classes.push('with-image');
 		if (this._params.info) classes.push('with-info');
-		if (this._params.detach) classes.push('with-remove')
+		if (this._params.detach) classes.push('with-remove')
+		if (this._params.customButtons?.hideOnUploadState) classes.push('hide-custom-buttons-on-upload-state')
 		if (this._params.sortable.enabled) classes.push('with-sortable');
 		const previewPath = this._resolveFilePreviewPath(file);
 		const displayName = this._resolveDisplayName(file);

package/app/modules/vgfiles/js/vgfiles.js

@@ -1,6 +1,6 @@
 /**
  * Описание: основной класс выбора, отображения и AJAX-загрузки файлов VGFiles.
- * Возможности: управляет списками и dropzone, прогрессом, удалением, повторной загрузкой и сортировкой.
+ * Возможности: управляет списками и dropzone, прогрессом, кастомными действиями, удалением, повторной загрузкой и сортировкой.
  */
 import VGFilesBase from "./base";
 import FileUploader from "./loader";
@@ -47,8 +47,11 @@ class VGFiles extends VGFilesBase {
             prepend: true,
             replace: true,
             rename: false,
-            smartdrop: false,
-            uploads: {
+            smartdrop: false,
+            customButtons: {
+                hideOnUploadState: true
+            },
+            uploads: {
                 mode: 'sequential',
                 route: '',
                 maxParallel: 3,

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

@@ -23,8 +23,18 @@
 	}
 }
 
-@mixin vgfiles-state() {
-	&.pending {
+@mixin vgfiles-state() {
+	&.hide-custom-buttons-on-upload-state {
+		&.pending,
+		&.loading,
+		&.failing {
+			.file-actions {
+				display: none;
+			}
+		}
+	}
+
+	&.pending {
 		> * {
 			opacity: .32;
 			pointer-events: none;

package/app/modules/vgtable/js/_sticky-header.js

@@ -1,6 +1,6 @@
 /**
  * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
- * Возможности: перенос настоящего thead без клона, синхронизация колонок и горизонтальной прокрутки.
+ * Возможности: перенос настоящего thead без клона, синхронизация ширин колонок и горизонтальной прокрутки.
  */
 
 const MODE_CLASSES = ['vg-table-wrapper--sticky-container', 'vg-table-wrapper--sticky-page'];
@@ -19,8 +19,9 @@ class _stickyHeader {
 		this._headerTable = null;
 		this._body = null;
 		this._previousClasses = new Map();
-		this._previousContainerClasses = new Map();
-		this._previousStyles = new Map();
+		this._previousContainerClasses = new Map();
+		this._previousStyles = new Map();
+		this._previousHeaderWidths = new Map();
 		this._boundScroll = this._syncScroll.bind(this);
 		this._boundResize = this.refresh.bind(this);
 		this._boundPageScroll = this._syncStickyState.bind(this);
@@ -68,9 +69,10 @@ class _stickyHeader {
 	refresh() {
 		if (!this._header || !this._headerTable || !this._body) return this;
 
-		const widths = this._measureBodyColumns();
-		this._applyColgroup(this._headerTable, widths);
-		this._applyColgroup(this._element, widths);
+		const widths = this._measureBodyColumns();
+		this._applyColgroup(this._headerTable, widths);
+		this._applyColgroup(this._element, widths);
+		this._applyHeaderWidths(widths);
 		const scrollbar = Math.max(0, this._body.offsetWidth - this._body.clientWidth);
 		this._header.style.paddingInlineEnd = `${scrollbar}px`;
 		this._header.style.setProperty('--vg-table-sticky-scrollbar-width', `${scrollbar}px`);
@@ -101,12 +103,16 @@ class _stickyHeader {
 		CONTAINER_MODE_CLASSES.forEach((className) => {
 			this._container.classList.toggle(className, this._previousContainerClasses.get(className) === true);
 		});
-		STYLE_PROPERTIES.forEach((property) => {
+		STYLE_PROPERTIES.forEach((property) => {
 			const previous = this._previousStyles.get(property);
 			if (previous) this._container.style.setProperty(property, previous);
 			else this._container.style.removeProperty(property);
-		});
-		this._element.removeAttribute('data-vg-table-sticky-header');
+		});
+		this._previousHeaderWidths.forEach((width, cell) => {
+			cell.style.width = width;
+		});
+		this._previousHeaderWidths.clear();
+		this._element.removeAttribute('data-vg-table-sticky-header');
 	}
 
 	_buildLayers(widths) {
@@ -131,16 +137,22 @@ class _stickyHeader {
 		this._body.append(this._element);
 	}
 
-	_measureColumns() {
-		const row = this._element.tBodies[0]?.rows[0] || this._head.rows[this._head.rows.length - 1];
-		return this._measureRow(row);
-	}
-
-	_measureBodyColumns() {
-		const row = this._element.tBodies[0]?.rows[0];
-		const widths = this._measureRow(row);
-		return widths.some((width) => width > 0) ? widths : this._measureRow(this._head.rows[this._head.rows.length - 1]);
-	}
+	_measureColumns() {
+		return this._measureBodyColumns();
+	}
+
+	_measureBodyColumns() {
+		const headerRow = this._head?.rows[this._head.rows.length - 1];
+		const headerWidths = this._measureRow(headerRow);
+		const rows = Array.from(this._element.tBodies || []).flatMap((body) => Array.from(body.rows || []));
+		for (const row of rows) {
+			if (row.hidden || row.hasAttribute('data-vg-table-state-row') || row.hasAttribute('data-vg-table-skeleton') || row.hasAttribute('data-vg-table-skeleton-row')) continue;
+			if (row.querySelector('[data-vg-table-state]')) continue;
+			const widths = this._measureRow(row);
+			if (widths.length === headerWidths.length && widths.some((width) => width > 0)) return widths;
+		}
+		return headerWidths;
+	}
 
 	_measureRow(row) {
 		if (!row) return [];
@@ -151,7 +163,7 @@ class _stickyHeader {
 		});
 	}
 
-	_applyColgroup(table, widths) {
+	_applyColgroup(table, widths) {
 		if (!widths.length) return;
 		if (table.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')) return;
 		let colgroup = table.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]');
@@ -164,8 +176,21 @@ class _stickyHeader {
 			const col = table.ownerDocument.createElement('col');
 			if (width > 0) col.style.width = `${width}px`;
 			return col;
-		}));
-	}
+		}));
+	}
+
+	_applyHeaderWidths(widths) {
+		const row = this._head?.rows[this._head.rows.length - 1];
+		if (!row || !widths.length) return;
+		let columnIndex = 0;
+		Array.from(row.cells).forEach((cell) => {
+			if (!this._previousHeaderWidths.has(cell)) this._previousHeaderWidths.set(cell, cell.style.width);
+			const span = Math.max(1, cell.colSpan || 1);
+			const width = widths.slice(columnIndex, columnIndex + span).reduce((total, value) => total + value, 0);
+			if (width > 0) cell.style.width = `${width}px`;
+			columnIndex += span;
+		});
+	}
 
 	_syncScroll() {
 		if (this._header && this._body) this._header.scrollLeft = this._body.scrollLeft;

package/app/modules/vgtable/scss/_sticky-header.scss

@@ -23,17 +23,18 @@
 		border-radius: var(--vg-table-sticky-radius);
 		background: var(--vg-table-sticky-bg);
 
-		.vg-table-header,
-		.vg-table-body {
-			width: 100%;
-		}
-
-		.vg-table-header {
-			position: relative;
-			overflow: hidden;
-			background: var(--vg-table-thead-bg);
-			border-start-start-radius: var(--vg-table-sticky-inner-radius);
-			border-start-end-radius: var(--vg-table-sticky-inner-radius);
+		.vg-table-header,
+		.vg-table-body {
+			width: 100%;
+		}
+
+		.vg-table-header {
+			position: relative;
+			z-index: var(--vg-table-sticky-z-index);
+			overflow: hidden;
+			background: var(--vg-table-thead-bg);
+			border-start-start-radius: var(--vg-table-sticky-inner-radius);
+			border-start-end-radius: var(--vg-table-sticky-inner-radius);
 
 			&--scrollbar::after {
 				content: "";
@@ -46,11 +47,16 @@
 				border-bottom: var(--vg-table-sticky-border-width) var(--vg-table-sticky-border-style) var(--vg-table-sticky-border-color);
 				background: var(--vg-table-fixed-header-bg, var(--vg-table-thead-bg));
 				pointer-events: none;
-			}
-		}
-
-		.vg-table-header__table,
-		.vg-table-body > .vg-table {
+			}
+		}
+
+		.vg-table-body {
+			position: relative;
+			z-index: 0;
+		}
+
+		.vg-table-header__table,
+		.vg-table-body > .vg-table {
 			width: 100%;
 			min-width: 100%;
 			table-layout: fixed;
@@ -114,8 +120,8 @@
 			}
 		}
 
-		.vg-table-body {
-			overflow: visible;
-		}
-	}
-}
+		.vg-table-body {
+			overflow: auto;
+		}
+	}
+}