vgapp 1.5.0 → 1.5.2

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

@@ -1,4 +1,4 @@
-/**
+/**
 *--------------------------------------------------------------------------
 * Модуль: VGFiles
 * Автор: Vegas DEV
@@ -61,12 +61,18 @@
 		}
 	}
 
-	&-errors {
-		padding: var(--vg-files-errors-padding-y) 0;
-
-		span {
-			font-size: var(--vg-files-errors-font-size);
-			color: var(--vg-danger);
+	&-errors {
+		display: grid;
+		gap: var(--vg-files-errors-gap);
+		padding: var(--vg-files-errors-padding-y) var(--vg-files-errors-padding-x);
+		margin-bottom: var(--vg-files-errors-margin-bottom);
+		border-left: var(--vg-files-errors-border-width) solid var(--vg-files-errors-border-color);
+		border-radius: var(--vg-files-errors-border-radius);
+		background: var(--vg-files-errors-bg);
+
+		span {
+			font-size: var(--vg-files-errors-font-size);
+			color: var(--vg-danger-color, var(--vg-danger, #ff2a2c));
 			display: block;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -393,7 +399,7 @@
 						.vg-filepreview-download-trigger {
 							padding: 0;
 							background: transparent;
-							color: var(--vg-secondary);
+							color: var(--vg-body-color);
 							border-radius: 0;
 							font-size: var(--vg-files-info-size-font-size);
 							font-weight: 500;
@@ -517,14 +523,18 @@
 		}
 	}
 
-	.file-failing-actions {
+	.file-failing-actions {
 		display: inline-flex;
 		align-items: center;
 		gap: var(--vg-files-info-failing-actions-gap);
-	}
-
-	&-info--list {
-		.file.failing {
+	}
+
+	&-info--list {
+		.file.validation-error {
+			box-shadow: inset 0 0 0 2px var(--vg-danger-color, var(--vg-danger, #ff2a2c));
+		}
+
+		.file.failing {
 			.file-remove {
 				margin-left: var(--vg-files-info-failing-actions-margin-start);
 			}
@@ -634,7 +644,7 @@
 			}
 		}
 
-		&--list {
+		&--list {
 			display: flex;
 			align-items: center;
 			gap: var(--vg-files-drop-list-gap);
@@ -646,7 +656,7 @@
 			border-radius: var(--vg-files-drop-radius);
 			overflow: hidden;
 
-			.file {
+			.file {
 				--vg-button-color: var(--vg-text-color, var(--vg-body-color, #000000));
 				border-radius: var(--vg-files-drop-file-radius);
 				position: relative;
@@ -655,7 +665,11 @@
 				height: var(--vg-files-drop-file-height);
 
 				@include files.vgfiles-sortable();
-				@include files.vgfiles-state();
+				@include files.vgfiles-state();
+
+				&.validation-error {
+					box-shadow: inset 0 0 0 2px var(--vg-danger-color, var(--vg-danger, #ff2a2c));
+				}
 
 				.file-image {
 					width: 100%;

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

@@ -1,7 +1,7 @@
-/**
- * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
- * Возможности: перенос настоящего thead без клона, синхронизация ширин колонок и горизонтальной прокрутки.
- */
+/**
+ * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
+ * Возможности: перенос настоящего thead без клона, автоматическая синхронизация ширин колонок и горизонтальной прокрутки.
+ */
 
 const MODE_CLASSES = ['vg-table-wrapper--sticky-container', 'vg-table-wrapper--sticky-page'];
 const CONTAINER_MODE_CLASSES = ['vg-table-container--sticky-container', 'vg-table-container--sticky-page'];
@@ -18,19 +18,24 @@ class _stickyHeader {
 		this._header = null;
 		this._headerTable = null;
 		this._body = null;
-		this._previousClasses = new Map();
+		this._previousClasses = 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);
+		this._columnWeights = new Map();
+		this._hardColumnWidths = new Map();
+		this._hasSourceColgroup = false;
+		this._resizeObserver = null;
+		this._resizeFrame = null;
+		this._boundScroll = this._syncScroll.bind(this);
+		this._boundResize = this._scheduleRefresh.bind(this);
+		this._boundPageScroll = this._syncStickyState.bind(this);
 	}
 
 	init() {
-		if (!this._wrapper || !this._container || !this._head) return this;
-
-		const widths = this._measureColumns();
+		if (!this._wrapper || !this._container || !this._head) return this;
+
+		const widths = this._measureColumns();
+		this._rememberColumnGeometry(widths);
 		MODE_CLASSES.forEach((className) => this._previousClasses.set(className, this._wrapper.classList.contains(className)));
 		CONTAINER_MODE_CLASSES.forEach((className) => this._previousContainerClasses.set(className, this._container.classList.contains(className)));
 		STYLE_PROPERTIES.forEach((property) => this._previousStyles.set(property, this._container.style.getPropertyValue(property)));
@@ -43,13 +48,17 @@ class _stickyHeader {
 		this._container.style.setProperty('--vg-table-sticky-max-height', this._toCssLength(this._params.maxHeight, '24rem'));
 		this._element.setAttribute('data-vg-table-sticky-header', this._params.mode);
 
-		this._buildLayers(widths);
-		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
-		if (typeof window !== 'undefined') {
-			window.addEventListener('resize', this._boundResize);
-			if (this._params.mode === 'page') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
-		}
-		this.refresh();
+		this._buildLayers(widths);
+		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
+		if (typeof ResizeObserver !== 'undefined') {
+			this._resizeObserver = new ResizeObserver(this._boundResize);
+			this._resizeObserver.observe(this._container);
+			this._resizeObserver.observe(this._body);
+		} else if (typeof window !== 'undefined') {
+			window.addEventListener('resize', this._boundResize);
+		}
+		if (this._params.mode === 'page' && typeof window !== 'undefined') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
+		this.refresh();
 		return this;
 	}
 
@@ -69,10 +78,9 @@ class _stickyHeader {
 	refresh() {
 		if (!this._header || !this._headerTable || !this._body) return this;
 
-		const widths = this._measureBodyColumns();
+		const widths = this._resolveLayoutWidths();
 		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`);
@@ -83,12 +91,17 @@ class _stickyHeader {
 		return this;
 	}
 
-	dispose() {
-		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
-		if (typeof window !== 'undefined') {
-			window.removeEventListener('resize', this._boundResize);
-			window.removeEventListener('scroll', this._boundPageScroll);
-		}
+	dispose() {
+		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
+		this._resizeObserver?.disconnect();
+		if (this._resizeFrame !== null && typeof cancelAnimationFrame === 'function') {
+			cancelAnimationFrame(this._resizeFrame);
+			this._resizeFrame = null;
+		}
+		if (typeof window !== 'undefined') {
+			if (!this._resizeObserver) window.removeEventListener('resize', this._boundResize);
+			window.removeEventListener('scroll', this._boundPageScroll);
+		}
 		this._header?.classList.remove('is-stuck');
 		if (this._head && this._headerTable?.contains(this._head)) this._element.prepend(this._head);
 		this._header?.remove();
@@ -108,12 +121,20 @@ class _stickyHeader {
 			if (previous) this._container.style.setProperty(property, previous);
 			else this._container.style.removeProperty(property);
 		});
-		this._previousHeaderWidths.forEach((width, cell) => {
-			cell.style.width = width;
-		});
-		this._previousHeaderWidths.clear();
 		this._element.removeAttribute('data-vg-table-sticky-header');
-	}
+	}
+
+	_scheduleRefresh() {
+		if (this._resizeFrame !== null) return;
+		if (typeof requestAnimationFrame !== 'function') {
+			this.refresh();
+			return;
+		}
+		this._resizeFrame = requestAnimationFrame(() => {
+			this._resizeFrame = null;
+			this.refresh();
+		});
+	}
 
 	_buildLayers(widths) {
 		this._header = this._element.ownerDocument.createElement('div');
@@ -154,7 +175,7 @@ class _stickyHeader {
 		return headerWidths;
 	}
 
-	_measureRow(row) {
+	_measureRow(row) {
 		if (!row) return [];
 		return Array.from(row.cells).flatMap((cell) => {
 			const span = Math.max(1, cell.colSpan || 1);
@@ -164,34 +185,121 @@ class _stickyHeader {
 	}
 
 	_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]');
+		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]');
 		if (!colgroup) {
 			colgroup = table.ownerDocument.createElement('colgroup');
-			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
-			table.prepend(colgroup);
-		}
-		colgroup.replaceChildren(...widths.map((width) => {
-			const col = table.ownerDocument.createElement('col');
-			if (width > 0) col.style.width = `${width}px`;
-			return col;
-		}));
+			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
+			table.prepend(colgroup);
+		}
+		while (colgroup.children.length < widths.length) colgroup.append(table.ownerDocument.createElement('col'));
+		while (colgroup.children.length > widths.length) colgroup.lastElementChild.remove();
+		const headers = this._getHeaders();
+		widths.forEach((width, index) => {
+			const col = colgroup.children[index];
+			if (width > 0) col.style.width = `${width}px`;
+			else col.style.removeProperty('width');
+			const hidden = headers[index]?.hidden === true;
+			col.hidden = hidden;
+			col.toggleAttribute('data-vg-table-column-hidden', hidden);
+		});
 	}
 
-	_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;
+	_rememberColumnGeometry(widths) {
+		const headers = this._getHeaders();
+		const sourceCols = Array.from(this._element.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')?.children || []);
+		this._hasSourceColgroup = sourceCols.length > 0;
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			this._columnWeights.set(key, widths[index] > 0 ? widths[index] : 1);
+			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(sourceCols[index])) {
+				this._hardColumnWidths.set(key, widths[index] > 0 ? widths[index] : 0);
+			}
 		});
 	}
-
+
+	_resolveLayoutWidths() {
+		const headers = this._getHeaders();
+		const measured = this._measureBodyColumns();
+		if (this._hasSourceColgroup || !headers.length) return measured;
+
+		const bodyRow = Array.from(this._element.tBodies || [])
+			.flatMap((body) => Array.from(body.rows || []))
+			.find((row) => !row.hidden && !row.hasAttribute('data-vg-table-state-row'));
+		const hard = new Map();
+		const flexible = [];
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			const bodyCell = bodyRow?.cells[index];
+			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(bodyCell) || this._hardColumnWidths.has(key)) {
+				const declared = this._readDeclaredPixelWidth(header) || this._readDeclaredPixelWidth(bodyCell);
+				const width = declared || this._hardColumnWidths.get(key) || measured[index] || 0;
+				this._hardColumnWidths.set(key, width);
+				hard.set(index, width);
+			} else {
+				flexible.push(index);
+			}
+		});
+
+		const measuredTotal = measured.reduce((total, width) => total + width, 0);
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || measuredTotal;
+		const minimum = this._readTableMinimumWidth();
+		const target = Math.max(viewport, minimum, 0);
+		const hardTotal = Array.from(hard.values()).reduce((total, width) => total + width, 0);
+		const available = Math.max(0, target - hardTotal);
+		const widths = Array(headers.length).fill(0);
+		hard.forEach((width, index) => { widths[index] = width; });
+
+		if (!flexible.length) return widths;
+		const weights = flexible.map((index) => {
+			const key = this._columnKey(headers[index], index);
+			return this._columnWeights.get(key) || measured[index] || 1;
+		});
+		const weightTotal = weights.reduce((total, weight) => total + weight, 0) || flexible.length;
+		let distributed = 0;
+		flexible.forEach((index, position) => {
+			const width = position === flexible.length - 1
+				? Math.max(0, available - distributed)
+				: available * weights[position] / weightTotal;
+			widths[index] = width;
+			distributed += width;
+		});
+		return widths;
+	}
+
+	_getHeaders() {
+		const rows = Array.from(this._head?.rows || []);
+		return rows.length ? Array.from(rows.at(-1).cells || []) : [];
+	}
+
+	_columnKey(header, index) {
+		return String(header?.getAttribute('data-field') || index).trim();
+	}
+
+	_hasDeclaredWidth(element) {
+		if (!element) return false;
+		return element.hasAttribute('width')
+			|| element.hasAttribute('data-column-width')
+			|| Boolean(element.style?.width || element.style?.minWidth || element.style?.maxWidth);
+	}
+
+	_readDeclaredPixelWidth(element) {
+		if (!element || !this._hasDeclaredWidth(element)) return 0;
+		const fixed = element.style?.minWidth && element.style.minWidth === element.style.maxWidth
+			? Number.parseFloat(element.style.width || element.style.minWidth)
+			: 0;
+		if (Number.isFinite(fixed) && fixed > 0) return fixed;
+		const measured = element.getBoundingClientRect?.().width || element.offsetWidth || 0;
+		return measured > 0 ? measured : 0;
+	}
+
+	_readTableMinimumWidth() {
+		if (typeof getComputedStyle !== 'function') return 0;
+		const value = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
+		return Number.isFinite(value) ? value : 0;
+	}
+
 	_syncScroll() {
 		if (this._header && this._body) this._header.scrollLeft = this._body.scrollLeft;
 	}

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

@@ -121,7 +121,8 @@
 		}
 
 		.vg-table-body {
-			overflow: auto;
+			overflow-x: auto;
+			overflow-y: hidden;
 		}
 	}
 }

package/app/modules/vgtable/scss/vgtable.scss

@@ -113,6 +113,12 @@
 						display: none;
 					}
 				}
+
+				&.not-splitter {
+					&:before {
+						display: none;
+					}
+				}
 			}
 		}