vgapp 1.4.8 → 1.4.9

package/app/modules/vgtable/js/_search.js

@@ -0,0 +1,134 @@
+/**
+ * Описание: отдельное поле поиска VGTable для локальных и Remote-таблиц.
+ * Возможности: debounce, немедленный запуск по Enter, очистка, публичное состояние и событие изменения.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_CHANGE = 'searchchange.vg.table';
+
+class _search {
+	constructor(table, options = {}, onChange = null) {
+		this._table = table;
+		this._options = options;
+		this._onChange = typeof onChange === 'function' ? onChange : null;
+		this._input = null;
+		this._resetButtons = [];
+		this._timer = null;
+		this._boundInput = this._handleInput.bind(this);
+		this._boundKeydown = this._handleKeydown.bind(this);
+		this._boundReset = this._handleReset.bind(this);
+	}
+
+	init() {
+		this._input = this._resolveNode(this._options.input);
+		if (!this._input) return this;
+		this._resetButtons = this._resolveNodes(this._options.button?.reset || '[data-search-reset]');
+		this._input.addEventListener('input', this._boundInput);
+		this._input.addEventListener('keydown', this._boundKeydown);
+		this._resetButtons.forEach((button) => button.addEventListener('click', this._boundReset));
+		return this;
+	}
+
+	dispose() {
+		this._input?.removeEventListener('input', this._boundInput);
+		this._input?.removeEventListener('keydown', this._boundKeydown);
+		this._resetButtons.forEach((button) => button.removeEventListener('click', this._boundReset));
+		this._clearTimer();
+		this._input = null;
+		this._resetButtons = [];
+	}
+
+	getState() {
+		return {
+			value: this._value(),
+			param: String(this._options.param || 'q').trim() || 'q',
+		};
+	}
+
+	setValue(value, options = {}) {
+		if (!this._input) return this.getState();
+		this._input.value = String(value ?? '');
+		this._clearTimer();
+		if (options.emit === true) this._emit(String(options.source || 'api'));
+		return this.getState();
+	}
+
+	reset(options = {}) {
+		return this.setValue('', {
+			emit: options.emit !== false,
+			source: String(options.source || 'reset'),
+		});
+	}
+
+	refresh() {
+		return this.getState();
+	}
+
+	_handleInput() {
+		this._schedule('input');
+	}
+
+	_handleKeydown(event) {
+		if (event.key !== 'Enter') return;
+		event.preventDefault();
+		this._clearTimer();
+		this._emit('enter');
+	}
+
+	_handleReset(event) {
+		event.preventDefault();
+		this.reset({source: 'reset'});
+		this._input?.focus?.();
+	}
+
+	_emit(source) {
+		const state = Object.assign(this.getState(), {source});
+		EventHandler.trigger(this._table, EVENT_CHANGE, state);
+		this._onChange?.(state);
+	}
+
+	_schedule(source) {
+		this._clearTimer();
+		this._timer = window.setTimeout(() => {
+			this._timer = null;
+			this._emit(source);
+		}, this._nonNegativeInt(this._options.debounce, 300));
+	}
+
+	_clearTimer() {
+		if (this._timer) window.clearTimeout(this._timer);
+		this._timer = null;
+	}
+
+	_value() {
+		const value = String(this._input?.value ?? '');
+		return this._options.trim === false ? value : value.trim();
+	}
+
+	_resolveNode(value) {
+		if (typeof Element !== 'undefined' && value instanceof Element) return value;
+		const selector = String(value || '').trim();
+		if (!selector) return null;
+		try { return document.querySelector(selector); } catch (_) { return null; }
+	}
+
+	_resolveNodes(value) {
+		const selector = String(value || '').trim();
+		if (!selector) return [];
+		try {
+			const scope = this._input?.form || this._input?.closest?.('[data-search-controls]') || document;
+			const scoped = Array.from(scope.querySelectorAll(selector));
+			return scoped.length ? scoped : Array.from(document.querySelectorAll(selector));
+		} catch (_) {
+			return [];
+		}
+	}
+
+	_nonNegativeInt(value, fallback) {
+		const parsed = Number.parseInt(value, 10);
+		return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+	}
+}
+
+export default _search;

package/app/modules/vgtable/js/_selection.js

@@ -0,0 +1,113 @@
+/**
+ * Описание: управление выбором строк базовой таблицы VGTable.
+ * Возможности: выбор кликом, одиночный и множественный режимы, публичное управление и событие изменения.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_SELECTION_CHANGE = 'selectionchange.vg.table';
+const ROW_SELECTOR = 'tbody tr';
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, label, [contenteditable="true"], [role="button"], [data-vg-table-selection-ignore]';
+const SELECTED_CLASS = 'vg-table-row-selected';
+const SELECTED_ATTRIBUTE = 'data-vg-table-selected';
+
+class _selection {
+	constructor(table, options = {}) {
+		this._table = table;
+		this._options = Object.assign({click: true, multiple: false}, options);
+		this._boundClick = this._handleClick.bind(this);
+	}
+
+	init() {
+		this._table.classList.toggle('vg-table-selection-click', this._options.click === true);
+		if (this._options.click === true) this._table.addEventListener('click', this._boundClick);
+	}
+
+	dispose() {
+		this._table.removeEventListener('click', this._boundClick);
+		this._table.classList.remove('vg-table-selection-click');
+		this.getSelectedRows().forEach((row) => this._setRowState(row, false));
+	}
+
+	selectRow(row, selected = true, emit = true) {
+		const target = this._resolveRow(row);
+		if (!target) return false;
+
+		const nextSelected = selected === true;
+		const currentlySelected = target.classList.contains(SELECTED_CLASS);
+		if (nextSelected === currentlySelected) return true;
+
+		if (nextSelected && this._options.multiple !== true) {
+			this.getSelectedRows().forEach((selectedRow) => {
+				if (selectedRow !== target) this._setRowState(selectedRow, false);
+			});
+		}
+
+		this._setRowState(target, nextSelected);
+		if (emit) this._emitChange(target, nextSelected);
+		return true;
+	}
+
+	toggleRow(row, emit = true) {
+		const target = this._resolveRow(row);
+		if (!target) return false;
+		return this.selectRow(target, !target.classList.contains(SELECTED_CLASS), emit);
+	}
+
+	getSelectedRows() {
+		return this._getRows().filter((row) => row.classList.contains(SELECTED_CLASS));
+	}
+
+	clearSelection(emit = true) {
+		const selectedRows = this.getSelectedRows();
+		if (!selectedRows.length) return false;
+
+		selectedRows.forEach((row) => this._setRowState(row, false));
+		if (emit) this._emitChange(null, false);
+		return true;
+	}
+
+	_handleClick(event) {
+		if (event.target.closest(INTERACTIVE_SELECTOR)) return;
+
+		const row = event.target.closest(ROW_SELECTOR);
+		if (row && this._table.contains(row)) this.toggleRow(row);
+	}
+
+	_getRows() {
+		return Array.from(this._table.tBodies || []).flatMap((body) => Array.from(body.rows || []));
+	}
+
+	_resolveRow(row) {
+		if (row instanceof Element) {
+			const target = row.matches(ROW_SELECTOR) ? row : row.closest(ROW_SELECTOR);
+			return target && this._table.contains(target) ? target : null;
+		}
+
+		const index = Number.parseInt(row, 10);
+		return Number.isInteger(index) ? this._getRows()[index] || null : null;
+	}
+
+	_setRowState(row, selected) {
+		row.classList.toggle(SELECTED_CLASS, selected);
+		if (selected) {
+			row.setAttribute(SELECTED_ATTRIBUTE, 'true');
+		} else {
+			row.removeAttribute(SELECTED_ATTRIBUTE);
+		}
+	}
+
+	_emitChange(row, selected) {
+		const rows = this.getSelectedRows();
+		const tableRows = this._getRows();
+		const keys = rows.map((selectedRow) => selectedRow.getAttribute('data-row-key') || String(tableRows.indexOf(selectedRow)));
+		EventHandler.trigger(this._table, EVENT_SELECTION_CHANGE, {
+			row,
+			selected,
+			rows,
+			keys,
+		});
+	}
+}
+
+export default _selection;

package/app/modules/vgtable/js/_skeleton.js

@@ -0,0 +1,123 @@
+/**
+ * Описание: skeleton-состояние загрузки строк VGTable.
+ * Возможности: сохраняет количество, высоту и ширины текущих строк, поддерживает пустую таблицу и пагинацию.
+ */
+
+const SKELETON_ROW_SELECTOR = 'tr[data-vg-table-skeleton]';
+
+class _skeleton {
+	constructor(table, options = {}, hooks = {}) {
+		this._table = table;
+		this._options = options;
+		this._hooks = hooks;
+	}
+
+	render() {
+		if (this._options.enabled === false) return 0;
+		const body = this._body();
+		const rows = this._dataRows();
+		const widths = this._columnWidths(rows[0]);
+		const preserveColumnWidths = this._hasHorizontalOverflow();
+		const columns = Math.max(1, widths.length, this._headerCells().length);
+		const rowCount = this._rowsCount(rows);
+		const rowHeight = this._rowHeight(rows[0]);
+		const fragment = this._table.ownerDocument.createDocumentFragment();
+
+		for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+			const row = this._table.ownerDocument.createElement('tr');
+			row.className = 'vg-table-skeleton-row';
+			row.setAttribute('data-vg-table-skeleton', '');
+			row.setAttribute('aria-hidden', 'true');
+			row.style.setProperty('--vg-table-skeleton-delay', `${(rowIndex * 0.08).toFixed(2)}s`);
+			if (rowHeight > 0) row.style.setProperty('--vg-table-skeleton-row-height', `${rowHeight}px`);
+
+			for (let columnIndex = 0; columnIndex < columns; columnIndex += 1) {
+				const cell = this._table.ownerDocument.createElement('td');
+				if (rowHeight > 0) cell.style.height = `${rowHeight}px`;
+				const width = Number.isFinite(widths[columnIndex]) ? Math.round(widths[columnIndex]) : 0;
+				if (preserveColumnWidths && width > 0) {
+					cell.style.width = `${width}px`;
+					cell.style.minWidth = `${width}px`;
+					cell.style.maxWidth = `${width}px`;
+				}
+				const content = this._table.ownerDocument.createElement('span');
+				content.className = 'vg-table-skeleton-cell';
+				const line = this._table.ownerDocument.createElement('span');
+				line.className = 'vg-table-skeleton-line';
+				content.append(line);
+				cell.append(content);
+				row.append(cell);
+			}
+			fragment.append(row);
+		}
+
+		body.replaceChildren(fragment);
+		this._hooks.afterRender?.();
+		return rowCount;
+	}
+
+	dispose() {
+		this._body().querySelectorAll(SKELETON_ROW_SELECTOR).forEach((row) => row.remove());
+	}
+
+	_rowsCount(rows) {
+		if (rows.length) return rows.length;
+		const current = this._body().querySelectorAll(SKELETON_ROW_SELECTOR).length;
+		if (current) return current;
+		const explicit = Number.parseInt(this._options.skeleton ?? this._options.rows, 10);
+		if (Number.isFinite(explicit) && explicit > 0) return explicit;
+		const perPage = Number.parseInt(this._hooks.getPagination?.()?.perPage, 10);
+		return Number.isFinite(perPage) && perPage > 0 ? perPage : 5;
+	}
+
+	_columnWidths(firstRow) {
+		const headerWidths = this._headerCells().map((cell) => this._width(cell));
+		if (headerWidths.some((width) => width > 0)) return headerWidths;
+		return firstRow ? Array.from(firstRow.cells || [], (cell) => this._width(cell)) : [];
+	}
+
+	_headerCells() {
+		const headerTable = this._hooks.getHeaderTable?.() || this._table;
+		const head = headerTable.tHead || headerTable.querySelector('thead');
+		return head?.rows.length ? Array.from(head.rows[head.rows.length - 1].cells) : [];
+	}
+
+	_dataRows() {
+		return Array.from(this._body().rows || []).filter((row) => (
+			!row.matches(SKELETON_ROW_SELECTOR) && !row.querySelector('[data-vg-table-state]')
+		));
+	}
+
+	_rowHeight(row) {
+		const rowHeight = row ? Math.round(this._height(row)) : 0;
+		if (rowHeight > 0) return rowHeight;
+		const headerTable = this._hooks.getHeaderTable?.() || this._table;
+		const head = headerTable.tHead || headerTable.querySelector('thead');
+		const headerRow = head?.rows.length ? head.rows[head.rows.length - 1] : null;
+		return headerRow ? Math.round(this._height(headerRow)) : 0;
+	}
+
+	_width(element) {
+		const width = element?.getBoundingClientRect?.().width;
+		return Number.isFinite(width) && width > 0 ? width : 0;
+	}
+
+	_height(element) {
+		const height = element?.getBoundingClientRect?.().height;
+		return Number.isFinite(height) && height > 0 ? height : 0;
+	}
+
+	_hasHorizontalOverflow() {
+		const host = this._hooks.getScrollHost?.()
+			|| this._table.closest('.vg-table-body')
+			|| this._table.closest('.vg-table-container');
+		if (!host) return false;
+		return host.scrollWidth - host.clientWidth > 1;
+	}
+
+	_body() {
+		return this._table.tBodies[0] || this._table.createTBody();
+	}
+}
+
+export default _skeleton;