vgapp 1.4.9 → 1.5.1

package/app/modules/vgfilepreview/scss/_variables.scss

@@ -22,11 +22,11 @@ $filepreview-map: (
 				toggle-size: 24px,
 				icon-size: 18px,
 				toggle-radius: 999px,
-				toggle-bg: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-				toggle-color: var(--vg-media-text-color, #ffffff),
+				toggle-bg: rgba(0, 0, 0, .12),
+				toggle-color: #000000,
 				name-line-height: 1.2,
-				progress-track: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
-				progress-fill: var(--vg-media-active-bg, rgba(255, 255, 255, .16)),
+				progress-track: rgba(0, 0, 0, .16),
+				progress-fill: rgba(0, 0, 0, .16),
 				progress-radius: 6px,
 				progress-padding-x: 4px,
 		),

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/vgfiles/scss/vgfiles.scss

@@ -393,7 +393,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;

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,18 +18,24 @@ class _stickyHeader {
 		this._header = null;
 		this._headerTable = null;
 		this._body = null;
-		this._previousClasses = new Map();
-		this._previousContainerClasses = new Map();
-		this._previousStyles = new Map();
-		this._boundScroll = this._syncScroll.bind(this);
-		this._boundResize = this.refresh.bind(this);
-		this._boundPageScroll = this._syncStickyState.bind(this);
+		this._previousClasses = new Map();
+		this._previousContainerClasses = new Map();
+		this._previousStyles = new Map();
+		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)));
@@ -42,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;
 	}
 
@@ -68,9 +78,9 @@ 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._resolveLayoutWidths();
+		this._applyColgroup(this._headerTable, widths);
+		this._applyColgroup(this._element, 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`);
@@ -81,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();
@@ -101,13 +116,25 @@ 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._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');
@@ -131,18 +158,24 @@ 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) {
+	_measureRow(row) {
 		if (!row) return [];
 		return Array.from(row.cells).flatMap((cell) => {
 			const span = Math.max(1, cell.colSpan || 1);
@@ -151,22 +184,122 @@ 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]');
+	_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 (!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);
+		});
+	}
+
+	_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

@@ -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,9 @@
 			}
 		}
 
-		.vg-table-body {
-			overflow: visible;
-		}
-	}
-}
+		.vg-table-body {
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+	}
+}

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

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