vgapp 1.4.7 → 1.4.9

package/app/modules/vgtable/js/_remote.js

@@ -0,0 +1,395 @@
+/**
+ * Описание: remote-источник строк для VGTable через общий Ajax requestRoute.
+ * Возможности: data/view/auto ответы, серверная пагинация и сортировка, parammap, отмена гонок, cache, состояния и экспорт.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_BEFORE_LOAD = 'beforeload.vg.table';
+const EVENT_REQUEST_SUCCESS = 'requestsuccess.vg.table';
+const EVENT_REQUEST_ERROR = 'requesterror.vg.table';
+const EVENT_DATA_LOADED = 'dataloaded.vg.table';
+const EVENT_AFTER_RENDER = 'afterrender.vg.table';
+
+class _remote {
+	constructor(table, options = {}, hooks = {}) {
+		this._table = table;
+		this._options = options;
+		this._hooks = hooks;
+		this._cache = new Map();
+		this._controller = null;
+		this._token = 0;
+		this._params = {};
+		this._lastMeta = {};
+		this._lastRequest = null;
+		this._loading = false;
+		this._boundClick = this._handleClick.bind(this);
+	}
+
+	init() {
+		this._table.addEventListener('click', this._boundClick);
+		return this.load();
+	}
+
+	dispose() {
+		this._token += 1;
+		this._controller?.abort?.();
+		this._table.removeEventListener('click', this._boundClick);
+		this._table.removeAttribute('aria-busy');
+		this._table.removeAttribute('data-vg-table-remote');
+		this._cache.clear();
+		this._controller = null;
+	}
+
+	load(options = {}) {
+		const pagination = this._hooks.getPagination?.() || {};
+		const page = this._positiveInt(options.page, pagination.page || 1);
+		const perPage = this._positiveInt(options.perPage, pagination.perPage || 10);
+		if (options.params && typeof options.params === 'object' && !Array.isArray(options.params)) {
+			this.setParams(options.params, options.replaceParams === true);
+		}
+
+		return this._request(page, perPage, {
+			force: options.force === true,
+			source: String(options.source || 'api'),
+		});
+	}
+
+	reload(options = {}) {
+		return this.load(Object.assign({}, options, {force: options.force !== false}));
+	}
+
+	setParams(params = {}, replace = false) {
+		const source = params && typeof params === 'object' && !Array.isArray(params) ? params : {};
+		this._params = replace ? Object.assign({}, source) : Object.assign({}, this._params, source);
+		return Object.assign({}, this._params);
+	}
+
+	clearCache() {
+		this._cache.clear();
+	}
+
+	getState() {
+		return {
+			loading: this._loading,
+			params: Object.assign({}, this._params),
+			meta: Object.assign({}, this._lastMeta),
+			request: this._lastRequest ? Object.assign({}, this._lastRequest) : null,
+		};
+	}
+
+	export(format = 'csv', options = {}) {
+		const route = String(options.route || this._options.export?.route || this._options.route || '').trim();
+		if (!route) return '';
+
+		const pagination = this._hooks.getPagination?.() || {};
+		const params = this._mapParams(this._buildParams(
+			this._positiveInt(options.page, pagination.page || 1),
+			this._positiveInt(options.perPage, pagination.perPage || 10)
+		));
+		params.format = String(format || 'csv').toLowerCase() === 'xlsx' ? 'xlsx' : 'csv';
+		const url = this._hooks.buildUrl(params, route, this._requestConfig(route));
+		if (options.open !== false && typeof window !== 'undefined') {
+			window.open?.(url.toString(), '_blank', 'noopener');
+		}
+		return url.toString();
+	}
+
+	async _request(page, perPage, options = {}) {
+		const route = String(this._options.route || '').trim();
+		if (!route) return null;
+
+		const requestParams = this._mapParams(this._buildParams(page, perPage));
+		const method = String(this._options.method || 'GET').toUpperCase();
+		const cacheKey = this._cacheKey(route, method, requestParams);
+		const cached = options.force ? null : this._readCache(cacheKey);
+		const startedAt = Date.now();
+		const token = ++this._token;
+		const requestId = `vg-table-${Date.now()}-${token}`;
+		const detail = {
+			requestId,
+			page,
+			perPage,
+			params: Object.assign({}, requestParams),
+			source: options.source,
+			fromCache: Boolean(cached),
+		};
+		this._lastRequest = detail;
+		this._controller?.abort?.();
+		this._controller = cached || typeof AbortController !== 'function' ? null : new AbortController();
+		this._loading = true;
+		this._table.setAttribute('data-vg-table-remote', '');
+		this._table.setAttribute('aria-busy', 'true');
+		this._emit(EVENT_BEFORE_LOAD, detail);
+		if (!cached) {
+			const rendered = this._hooks.renderLoading?.();
+			if (!rendered) this._renderState(this._label('loading', 'Загрузка…'), 'loading');
+		}
+
+		try {
+			const response = cached || await this._hooks.request(this._buildRequest(requestParams, this._controller?.signal, options.source));
+			if (token !== this._token) return null;
+			if (!cached) await this._waitMinLoadingDelay(startedAt);
+			if (token !== this._token) return null;
+			if (!cached) this._writeCache(cacheKey, response);
+			const result = this._applyResponse(response, page, perPage);
+			this._emit(EVENT_REQUEST_SUCCESS, Object.assign({}, detail, {response, meta: result.meta}));
+			this._emit(EVENT_DATA_LOADED, Object.assign({}, detail, result, {response}));
+			this._emit(EVENT_AFTER_RENDER, Object.assign({}, detail, {
+				renderedCount: result.renderedCount,
+				total: result.meta.total,
+			}));
+			return result;
+		} catch (error) {
+			if (error?.name === 'AbortError' || token !== this._token) return null;
+			if (!cached) await this._waitMinLoadingDelay(startedAt);
+			if (token !== this._token) return null;
+			if (!this._hooks.renderError?.(error)) this._renderState(this._label('error', 'Не удалось загрузить данные'), 'error');
+			this._emit(EVENT_REQUEST_ERROR, Object.assign({}, detail, {error}));
+			return null;
+		} finally {
+			if (token === this._token) {
+				this._loading = false;
+				this._table.setAttribute('aria-busy', 'false');
+				this._controller = null;
+			}
+		}
+	}
+
+	_waitMinLoadingDelay(startedAt) {
+		const delay = this._nonNegativeInt(this._hooks.getLoadingMinDelay?.(), 0);
+		const remaining = delay - Math.max(0, Date.now() - startedAt);
+		return remaining > 0
+			? new Promise((resolve) => window.setTimeout(resolve, remaining))
+			: Promise.resolve();
+	}
+
+	_buildRequest(params, signal, source = 'api') {
+		const method = String(this._options.method || 'GET').toUpperCase();
+		const isGetLike = method === 'GET' || method === 'HEAD';
+		const config = this._requestConfig();
+		if (source === 'retry') config.headers['X-VGTable-Retry'] = '1';
+		return Object.assign(config, {
+			method,
+			params: isGetLike ? params : {},
+			body: isGetLike ? null : params,
+			signal,
+			responseType: 'json',
+		});
+	}
+
+	_requestConfig(route = this._options.route) {
+		return {
+			route,
+			method: this._options.method,
+			credentials: this._options.credentials,
+			headers: Object.assign({}, this._options.headers || {}),
+			baseParams: Object.assign({}, this._options.params || {}),
+		};
+	}
+
+	_buildParams(page, perPage) {
+		const params = Object.assign({}, this._params, {page, per_page: perPage});
+		const sort = this._hooks.getSort?.();
+		const sorts = Array.isArray(sort?.sorts) && sort.sorts.length ? sort.sorts : (sort?.field ? [sort] : []);
+		if (sorts.length) {
+			params.sort = sorts.map((item) => item.field).filter(Boolean).join(',');
+			params.dir = sorts.map((item) => item.direction === 'desc' ? 'desc' : 'asc').join(',');
+		}
+
+		const mode = this._responseMode();
+		params.responsemode = mode;
+		if (mode !== 'data') {
+			const viewParam = String(this._options.viewparam || '').trim();
+			const viewValue = String(this._options.viewvalue || '').trim();
+			if (viewParam && viewValue) params[viewParam] = viewValue;
+			const fieldsParam = String(this._options.fieldsparam || '').trim();
+			const fields = this._fields();
+			if (fieldsParam && fields.length) params[fieldsParam] = fields.join(',');
+		}
+		return params;
+	}
+
+	_mapParams(params) {
+		const map = this._options.parammap && typeof this._options.parammap === 'object'
+			? this._options.parammap
+			: {};
+		return Object.keys(params).reduce((result, key) => {
+			const mapped = String(Object.prototype.hasOwnProperty.call(map, key) ? map[key] : key).trim() || key;
+			result[mapped] = params[key];
+			return result;
+		}, {});
+	}
+
+	_applyResponse(response, requestedPage, requestedPerPage) {
+		const rows = this._extractRows(response);
+		const view = this._extractView(response);
+		const meta = this._normalizeMeta(this._readPath(response, this._options.metapath), rows, requestedPage, requestedPerPage);
+		const mode = this._responseMode();
+		const useView = mode === 'view' || (mode === 'auto' && typeof view === 'string' && view.trim() !== '');
+		let renderedCount = 0;
+
+		if (useView && typeof view === 'string' && view.trim() !== '') {
+			this._body().innerHTML = view;
+			renderedCount = this._body().rows.length;
+		} else if (Array.isArray(rows) && rows.length) {
+			renderedCount = this._renderRows(rows);
+		} else {
+			if (!this._hooks.renderEmpty?.({rows, view, meta})) this._renderState(this._label('empty', 'Ничего не найдено'), 'empty');
+		}
+
+		this._lastMeta = meta;
+		this._hooks.applyMeta?.(meta);
+		this._hooks.afterRender?.({rows, view, meta, renderedCount});
+		return {rows, view, meta, renderedCount};
+	}
+
+	_renderRows(rows) {
+		const body = this._body();
+		const fields = this._fields();
+		const fragment = this._table.ownerDocument.createDocumentFragment();
+		rows.forEach((row) => {
+			const tr = this._table.ownerDocument.createElement('tr');
+			fields.forEach((field) => {
+				const td = this._table.ownerDocument.createElement('td');
+				const value = this._readPath(row, field);
+				td.textContent = value === undefined || value === null ? '' : String(value);
+				tr.append(td);
+			});
+			fragment.append(tr);
+		});
+		body.replaceChildren(fragment);
+		return rows.length;
+	}
+
+	_renderState(message, state) {
+		const body = this._body();
+		const row = this._table.ownerDocument.createElement('tr');
+		const cell = this._table.ownerDocument.createElement('td');
+		cell.colSpan = Math.max(1, this._fields().length || this._headerCells().length);
+		cell.setAttribute('data-vg-table-state', state);
+		const text = this._table.ownerDocument.createElement('span');
+		text.textContent = message;
+		cell.append(text);
+		if (state === 'error') {
+			const button = this._table.ownerDocument.createElement('button');
+			button.type = 'button';
+			button.className = 'vg-table-state__retry';
+			button.setAttribute('data-vg-table-retry', '');
+			button.textContent = this._label('retry', 'Повторить');
+			cell.append(button);
+		}
+		row.append(cell);
+		body.replaceChildren(row);
+	}
+
+	_label(key, fallback) {
+		return String(this._options.labels?.[key] || fallback || '');
+	}
+
+	_normalizeMeta(source, rows, page, perPage) {
+		const meta = source && typeof source === 'object' && !Array.isArray(source) ? source : {};
+		const normalizedPage = this._positiveInt(meta.page ?? meta.current_page, page);
+		const normalizedPerPage = this._positiveInt(meta.per_page ?? meta.perPage, perPage);
+		const total = this._nonNegativeInt(meta.total, Array.isArray(rows) ? rows.length : 0);
+		const pages = this._positiveInt(meta.pages ?? meta.last_page, Math.max(1, Math.ceil(total / normalizedPerPage)));
+		return Object.assign({}, meta, {
+			page: Math.min(normalizedPage, pages),
+			per_page: normalizedPerPage,
+			total,
+			pages,
+		});
+	}
+
+	_extractRows(response) {
+		const rows = this._readPath(response, this._options.datapath);
+		return Array.isArray(rows) ? rows : [];
+	}
+
+	_extractView(response) {
+		const view = this._readPath(response, this._options.viewpath);
+		return typeof view === 'string' ? view : '';
+	}
+
+	_readPath(source, path) {
+		const parts = String(path || '').split('.').map((item) => item.trim()).filter(Boolean);
+		let current = source;
+		for (const part of parts) {
+			if (!current || typeof current !== 'object' || !Object.prototype.hasOwnProperty.call(current, part)) return undefined;
+			current = current[part];
+		}
+		return current;
+	}
+
+	_fields() {
+		return this._headerCells()
+			.map((header) => String(header.getAttribute('data-field') || '').trim())
+			.filter(Boolean);
+	}
+
+	_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) : [];
+	}
+
+	_body() {
+		return this._table.tBodies[0] || this._table.createTBody();
+	}
+
+	_responseMode() {
+		const mode = String(this._options.responsemode || 'data').toLowerCase();
+		return ['data', 'view', 'auto'].includes(mode) ? mode : 'data';
+	}
+
+	_cacheKey(route, method, params) {
+		const query = Object.keys(params).sort().map((key) => {
+			const value = Array.isArray(params[key]) ? params[key].join(',') : params[key];
+			return `${encodeURIComponent(key)}=${encodeURIComponent(value ?? '')}`;
+		}).join('&');
+		return `${method}:${route}?${query}`;
+	}
+
+	_readCache(key) {
+		if (this._options.cache?.enable === false) return null;
+		const entry = this._cache.get(key);
+		if (!entry) return null;
+		const ttl = this._positiveInt(this._options.cache?.ttl, 30000);
+		if (Date.now() - entry.createdAt > ttl) {
+			this._cache.delete(key);
+			return null;
+		}
+		entry.usedAt = Date.now();
+		return entry.response;
+	}
+
+	_writeCache(key, response) {
+		if (this._options.cache?.enable === false) return;
+		this._cache.set(key, {response, createdAt: Date.now(), usedAt: Date.now()});
+		const max = this._positiveInt(this._options.cache?.max, 30);
+		if (this._cache.size <= max) return;
+		const oldest = Array.from(this._cache.entries()).sort((left, right) => left[1].usedAt - right[1].usedAt)[0];
+		if (oldest) this._cache.delete(oldest[0]);
+	}
+
+	_handleClick(event) {
+		if (!event.target.closest('[data-vg-table-retry]')) return;
+		this.reload({source: 'retry'});
+	}
+
+	_emit(name, detail) {
+		EventHandler.trigger(this._table, name, detail);
+	}
+
+	_positiveInt(value, fallback) {
+		const parsed = Number.parseInt(value, 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+	}
+
+	_nonNegativeInt(value, fallback) {
+		const parsed = Number.parseInt(value, 10);
+		return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+	}
+}
+
+export default _remote;

package/app/modules/vgtable/js/_row-reorder.js

@@ -0,0 +1,268 @@
+/**
+ * Описание: самостоятельное изменение порядка строк VGTable.
+ * Возможности: режим строки или handle, native drag-and-drop, клавиатура, localStorage, публичные методы и события.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+const EVENT_REORDER = 'rowreorder.vg.table';
+const DRAGGING_ATTRIBUTE = 'data-vg-table-row-dragging';
+const OVER_ATTRIBUTE = 'data-vg-table-row-drag-over';
+const DECORATED_ATTRIBUTE = 'data-vg-table-row-reorder';
+const STATE_ROW_SELECTOR = '[data-vg-table-state-row], [data-vg-table-skeleton-row]';
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, [contenteditable="true"]';
+
+class _rowReorder {
+	constructor(table, wrapper, options = {}, hooks = {}) {
+		this._table = table;
+		this._wrapper = wrapper;
+		this._options = options;
+		this._hooks = hooks;
+		this._original = new Map();
+		this._rowState = new WeakMap();
+		this._handleState = new WeakMap();
+		this._drag = {row: null, fromIndex: -1, target: null, after: false};
+		this._boundDragStart = this._handleDragStart.bind(this);
+		this._boundDragOver = this._handleDragOver.bind(this);
+		this._boundDrop = this._handleDrop.bind(this);
+		this._boundDragEnd = this._clearDrag.bind(this);
+		this._boundKeydown = this._handleKeydown.bind(this);
+	}
+
+	init() {
+		Array.from(this._table.tBodies || []).forEach(body => this._original.set(body, this._rows(body)));
+		this._restoreStoredOrder();
+		this.refresh();
+		this._table.addEventListener('dragstart', this._boundDragStart);
+		this._table.addEventListener('dragover', this._boundDragOver);
+		this._table.addEventListener('drop', this._boundDrop);
+		this._table.addEventListener('dragend', this._boundDragEnd);
+		this._table.addEventListener('keydown', this._boundKeydown);
+		return this;
+	}
+
+	refresh() {
+		this._rows().forEach((row, index) => this._decorate(row, index));
+		return this.getState();
+	}
+
+	getState() {
+		return {order: this._rows().map((row, index) => this._key(row, index)), rows: this._rows()};
+	}
+
+	move(row, target, position = 'before', emit = true) {
+		const moving = this._resolveRow(row);
+		const destination = this._resolveRow(target);
+		if (!moving || !destination || moving === destination || moving.parentElement !== destination.parentElement) return false;
+		if (this._disabled(moving) || this._disabled(destination)) return false;
+		const rows = this._rows(moving.parentElement);
+		const fromIndex = rows.indexOf(moving);
+		const after = String(position).toLowerCase() === 'after';
+		if ((!after && moving.nextElementSibling === destination) || (after && destination.nextElementSibling === moving)) return false;
+		moving.parentElement.insertBefore(moving, after ? destination.nextSibling : destination);
+		this._afterMove(moving, fromIndex, emit);
+		return true;
+	}
+
+	reset(emit = true) {
+		this._original.forEach((rows, body) => rows.forEach(row => body.append(row)));
+		this._clearStorage();
+		this.refresh();
+		this._hooks.refreshLayout?.();
+		if (emit) EventHandler.trigger(this._table, EVENT_REORDER, Object.assign({reset: true}, this.getState()));
+		return this.getState();
+	}
+
+	dispose() {
+		this._table.removeEventListener('dragstart', this._boundDragStart);
+		this._table.removeEventListener('dragover', this._boundDragOver);
+		this._table.removeEventListener('drop', this._boundDrop);
+		this._table.removeEventListener('dragend', this._boundDragEnd);
+		this._table.removeEventListener('keydown', this._boundKeydown);
+		this._clearDrag();
+		this._rows().forEach(row => this._undecorate(row));
+		this._original.forEach((rows, body) => rows.forEach(row => body.append(row)));
+		this._original.clear();
+	}
+
+	_decorate(row, index) {
+		if (!this._rowState.has(row)) this._rowState.set(row, {
+			draggable: row.getAttribute('draggable'), tabindex: row.getAttribute('tabindex'), label: row.getAttribute('aria-label'),
+		});
+		const disabled = this._disabled(row);
+		const mode = this._mode();
+		row.setAttribute(DECORATED_ATTRIBUTE, disabled ? 'disabled' : mode);
+		row.draggable = !disabled && mode === 'row';
+		if (!disabled && mode === 'row') {
+			if (!row.hasAttribute('tabindex')) row.tabIndex = 0;
+			row.setAttribute('aria-label', this._handleLabel(row, index));
+		}
+		this._handles(row).forEach(handle => {
+			if (!this._handleState.has(handle)) this._handleState.set(handle, {
+				draggable: handle.getAttribute('draggable'), tabindex: handle.getAttribute('tabindex'),
+				role: handle.getAttribute('role'), label: handle.getAttribute('aria-label'), disabled: handle.getAttribute('aria-disabled'),
+			});
+			handle.draggable = !disabled && mode === 'handle';
+			if (!disabled && !handle.hasAttribute('tabindex')) handle.tabIndex = 0;
+			if (!handle.hasAttribute('role')) handle.setAttribute('role', 'button');
+			handle.setAttribute('aria-label', this._handleLabel(row, index));
+			handle.toggleAttribute('aria-disabled', disabled);
+		});
+	}
+
+	_undecorate(row) {
+		row.removeAttribute(DECORATED_ATTRIBUTE);
+		row.removeAttribute(DRAGGING_ATTRIBUTE);
+		row.removeAttribute(OVER_ATTRIBUTE);
+		const rowState = this._rowState.get(row) || {};
+		this._restoreAttribute(row, 'draggable', rowState.draggable);
+		this._restoreAttribute(row, 'tabindex', rowState.tabindex);
+		this._restoreAttribute(row, 'aria-label', rowState.label);
+		this._handles(row).forEach(handle => {
+			const state = this._handleState.get(handle) || {};
+			this._restoreAttribute(handle, 'draggable', state.draggable);
+			this._restoreAttribute(handle, 'tabindex', state.tabindex);
+			this._restoreAttribute(handle, 'role', state.role);
+			this._restoreAttribute(handle, 'aria-label', state.label);
+			this._restoreAttribute(handle, 'aria-disabled', state.disabled);
+		});
+	}
+
+	_restoreAttribute(element, name, value) {
+		if (value === null || value === undefined) element.removeAttribute(name);
+		else element.setAttribute(name, value);
+	}
+
+	_handleDragStart(event) {
+		const row = event.target.closest?.(`tr[${DECORATED_ATTRIBUTE}]`);
+		if (!row || this._disabled(row)) return;
+		if (this._mode() === 'handle' && !event.target.closest?.(this._handleSelector())) {
+			event.preventDefault();
+			return;
+		}
+		if (this._mode() === 'row' && event.target.closest?.(INTERACTIVE_SELECTOR)) {
+			event.preventDefault();
+			return;
+		}
+		this._drag = {row, fromIndex: this._rows(row.parentElement).indexOf(row), target: null, after: false};
+		row.setAttribute(DRAGGING_ATTRIBUTE, '');
+		this._wrapper?.classList.add('vg-table-wrapper--row-dragging');
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			try { event.dataTransfer.setData('text/plain', this._key(row, this._drag.fromIndex)); } catch (error) { /* noop */ }
+		}
+	}
+
+	_handleDragOver(event) {
+		if (!this._drag.row) return;
+		const target = event.target.closest?.(`tr[${DECORATED_ATTRIBUTE}]`);
+		if (!target || target === this._drag.row || target.parentElement !== this._drag.row.parentElement || this._disabled(target)) return;
+		event.preventDefault();
+		const rect = target.getBoundingClientRect();
+		const after = event.clientY > rect.top + rect.height / 2;
+		this._rows().forEach(row => row.removeAttribute(OVER_ATTRIBUTE));
+		target.setAttribute(OVER_ATTRIBUTE, after ? 'after' : 'before');
+		this._drag.target = target;
+		this._drag.after = after;
+	}
+
+	_handleDrop(event) {
+		if (!this._drag.row || !this._drag.target) return this._clearDrag();
+		event.preventDefault();
+		const {row, target, after, fromIndex} = this._drag;
+		row.parentElement.insertBefore(row, after ? target.nextSibling : target);
+		this._clearDrag();
+		this._afterMove(row, fromIndex, true);
+	}
+
+	_handleKeydown(event) {
+		if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+		const handle = event.target.closest?.(this._handleSelector());
+		const row = handle?.closest?.(`tr[${DECORATED_ATTRIBUTE}]`)
+			|| (this._mode() === 'row' ? event.target.closest?.(`tr[${DECORATED_ATTRIBUTE}]`) : null);
+		if (!row || this._disabled(row)) return;
+		if (!handle && event.target !== row && event.target.closest?.(INTERACTIVE_SELECTOR)) return;
+		const rows = this._rows(row.parentElement).filter(item => !this._disabled(item));
+		const index = rows.indexOf(row);
+		const target = event.key === 'Home' ? rows[0] : event.key === 'End' ? rows.at(-1) : rows[index + (event.key === 'ArrowUp' ? -1 : 1)];
+		if (!target || target === row) return;
+		event.preventDefault();
+		this.move(row, target, event.key === 'ArrowDown' || event.key === 'End' ? 'after' : 'before', true);
+		(handle || row).focus?.();
+	}
+
+	_afterMove(row, fromIndex, emit) {
+		this.refresh();
+		this._storeOrder();
+		this._hooks.refreshLayout?.();
+		if (!emit) return;
+		const rows = this._rows(row.parentElement);
+		const toIndex = rows.indexOf(row);
+		EventHandler.trigger(this._table, EVENT_REORDER, {
+			row, key: this._key(row, toIndex), fromIndex, toIndex,
+			beforeRow: row.previousElementSibling || null, afterRow: row.nextElementSibling || null,
+			order: rows.map((item, index) => this._key(item, index)),
+		});
+	}
+
+	_clearDrag() {
+		this._rows().forEach(row => {
+			row.removeAttribute(DRAGGING_ATTRIBUTE);
+			row.removeAttribute(OVER_ATTRIBUTE);
+		});
+		this._wrapper?.classList.remove('vg-table-wrapper--row-dragging');
+		this._drag = {row: null, fromIndex: -1, target: null, after: false};
+	}
+
+	_rows(body = null) {
+		const bodies = body ? [body] : Array.from(this._table.tBodies || []);
+		return bodies.flatMap(item => Array.from(item.rows || [])).filter(row => !row.matches(STATE_ROW_SELECTOR));
+	}
+
+	_resolveRow(value) {
+		if (value?.tagName === 'TR' && this._table.contains(value)) return value;
+		const rows = this._rows();
+		if (typeof value === 'number') return rows[Number.parseInt(value, 10)] || null;
+		const key = String(value || '').trim();
+		return rows.find((row, index) => this._key(row, index) === key) || null;
+	}
+
+	_key(row, index) {
+		return String(row.getAttribute(this._options.keyAttr || 'data-row-key') ?? row.getAttribute('data-id') ?? index);
+	}
+
+	_disabled(row) { return row.hasAttribute('data-row-reorder-disabled'); }
+	_mode() { return String(this._options.mode || 'handle').toLowerCase() === 'row' ? 'row' : 'handle'; }
+	_handleSelector() { return String(this._options.handleSelector || '[data-row-reorder-handle]').trim() || '[data-row-reorder-handle]'; }
+	_handles(row) { return Array.from(row.querySelectorAll(this._handleSelector())); }
+	_handleLabel(row, index) {
+		const template = String(this._options.labels?.handle || 'Изменить позицию строки {row}');
+		return template.replace('{row}', this._key(row, index));
+	}
+
+	_storageKey() {
+		if (this._options.persist !== true || typeof window === 'undefined') return '';
+		return String(this._options.storageKey || '').trim() || (this._table.id ? `vg-table:${this._table.id}:row-order` : '');
+	}
+	_storeOrder() {
+		const key = this._storageKey();
+		if (key) try { window.localStorage.setItem(key, JSON.stringify(this.getState().order)); } catch (error) { /* noop */ }
+	}
+	_restoreStoredOrder() {
+		const key = this._storageKey();
+		if (!key) return;
+		let order = [];
+		try { order = JSON.parse(window.localStorage.getItem(key)) || []; } catch (error) { return; }
+		if (!Array.isArray(order)) return;
+		order.forEach((rowKey, targetIndex) => {
+			const row = this._resolveRow(String(rowKey));
+			const target = this._rows(row?.parentElement)[targetIndex];
+			if (row && target && row !== target && !this._disabled(row) && !this._disabled(target)) target.before(row);
+		});
+	}
+	_clearStorage() {
+		const key = this._storageKey();
+		if (key) try { window.localStorage.removeItem(key); } catch (error) { /* noop */ }
+	}
+}
+
+export default _rowReorder;