vgapp 1.2.5 → 1.3.0

package/README.md

@@ -6,10 +6,119 @@ VGApp — набор фронтенд‑модулей (UI‑компонент
 
 [![npm](https://img.shields.io/npm/v/vgapp.svg?style=flat-square&maxAge=600)](https://www.npmjs.com/package/vgapp) [![npm](https://img.shields.io/npm/l/vgapp.svg?style=flat-square)]()
 
-## Install
-```
-npm i vgapp
-```
+## Install
+```
+npm i vgapp
+```
+
+Локально из соседнего репозитория:
+```json
+{
+	"dependencies": {
+		"vgapp": "file:../vegas-app"
+	}
+}
+```
+
+## API
+```js
+import vgapp from 'vgapp';
+
+vgapp.boot();
+```
+
+- `vgapp` экспортируется как singleton app.
+- `vgapp.register()` регистрирует модули по их статическому `NAME`.
+- `vgapp.boot()` вызывает общий boot-контракт модуля.
+- У модулей со своим `initAll()` boot использует его автоматически.
+
+Для выборочного набора модулей создавайте отдельный экземпляр:
+```js
+import { VGApp, VGModal, VGTooltip } from 'vgapp';
+
+const app = new VGApp();
+
+app
+	.register(VGModal, VGTooltip)
+	.boot();
+```
+
+## Подключение
+
+### Laravel + Vite
+`resources/js/app.js`
+```js
+import vgapp from 'vgapp';
+import 'vgapp/build/vgapp.css';
+
+vgapp.boot();
+```
+
+`vite.config.js`
+```js
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+	plugins: [
+		laravel([
+			'resources/css/app.css',
+			'resources/js/app.js',
+		]),
+	],
+});
+```
+
+В Blade:
+```php
+@vite(['resources/css/app.css', 'resources/js/app.js'])
+```
+
+### Vite
+`src/main.js`
+```js
+import vgapp from 'vgapp';
+import 'vgapp/build/vgapp.css';
+
+vgapp.boot();
+```
+
+### Webpack
+`src/app.js`
+```js
+import vgapp from 'vgapp';
+import 'vgapp/build/vgapp.css';
+
+vgapp.boot();
+```
+
+Минимально в `webpack.config.js`:
+```js
+module.exports = {
+	entry: './src/app.js',
+	module: {
+		rules: [
+			{
+				test: /\.css$/i,
+				use: ['style-loader', 'css-loader'],
+			},
+		],
+	},
+};
+```
+
+### Частичный boot
+Если не нужно поднимать весь реестр singleton-приложения:
+```js
+import { VGApp, VGModal, VGTooltip } from 'vgapp';
+import 'vgapp/build/vgapp.css';
+
+const app = new VGApp();
+
+app
+	.register(VGModal, VGTooltip)
+	.boot();
+```
 
 ## Что умеет
 
@@ -21,22 +130,24 @@ npm i vgapp
 - Локализация интерфейсных текстов.
 - Расширяемая архитектура модулей и рендереров.
 
-### Основные модули
-- `VGAlert` — диалоги подтверждения и уведомления с поддержкой AJAX‑сценариев.
-- `VGCollapse` — сворачиваемые секции и аккордеоны с анимацией.
-- `VGDropdown` — выпадающие меню с гибким открытием и позиционированием.
-- `VGFiles` — загрузка и управление файлами (dropzone, валидация, AJAX, сортировка).
-- `VGFilePreview` — предпросмотр файлов разных типов и действия по файлу (preview/download).
-- `VGFormSender` — отправка форм (AJAX/нативно), обработка состояний и ответов.
-- `VGLawCookie` — баннер cookies с сохранением выбора пользователя.
-- `VGLoadMore` — подгрузка контента кнопкой или при прокрутке.
-- `VGModal` — базовый модуль модальных окон.
-- `VGNav` — навигация и мобильное меню.
-- `VGNestable` — drag‑and‑drop вложенных списков с обновлением структуры.
-- `VGRollup` — ограничение контента по высоте/элементам с кнопкой разворота.
-- `VGSelect` — кастомный select с поиском, мультивыбором и i18n.
-- `VGSidebar` — боковые панели с управлением открытием/закрытием.
-- `VGSpy` — scroll‑spy для подсветки активных ссылок по секциям.
+### Основные модули
+- `VGAlert` — диалоги подтверждения и уведомления с поддержкой AJAX‑сценариев.
+- `VGCollapse` — сворачиваемые секции и аккордеоны с анимацией.
+- `VGDropdown` — выпадающие меню с гибким открытием и позиционированием.
+- `VGDynamicTable` — интерактивные таблицы с сортировкой, фильтрацией, remote-режимом и состоянием.
+- `VGFiles` — загрузка и управление файлами (dropzone, валидация, AJAX, сортировка).
+- `VGFilePreview` — предпросмотр файлов разных типов и действия по файлу (preview/download).
+- `VGFormSender` — отправка форм (AJAX/нативно), обработка состояний и ответов.
+- `VGLawCookie` — баннер cookies с сохранением выбора пользователя.
+- `VGLoadMore` — подгрузка контента кнопкой или при прокрутке.
+- `VGModal` — базовый модуль модальных окон.
+- `VGNav` — навигация и мобильное меню.
+- `VGNestable` — drag‑and‑drop вложенных списков с обновлением структуры.
+- `VGRangeSlider` — одиночные и диапазонные слайдеры со значениями, лимитами и синхронизацией полей.
+- `VGRollup` — ограничение контента по высоте/элементам с кнопкой разворота.
+- `VGSelect` — кастомный select с поиском, мультивыбором и i18n.
+- `VGSidebar` — боковые панели с управлением открытием/закрытием.
+- `VGSpy` — scroll‑spy для подсветки активных ссылок по секциям.
 - `VGTabs` — вкладки с переключением контента и поддержкой URL/hash.
 - `VGToast` — всплывающие уведомления со стеком и автозакрытием.
 - `VGTooltip` — tooltip/popover подсказки с Data API, автопозиционированием и закрытием по `Esc`/клику вне элемента.

package/app/modules/base-module.js

@@ -15,8 +15,8 @@ import Animation from "../utils/js/components/animation";
 import Ajax from "../utils/js/components/ajax";
 import Html from "../utils/js/components/templater";
 
-class BaseModule {
-	constructor(element) {
+class BaseModule {
+	constructor(element) {
 		if (!element) return
 
 		this._element = Selectors.find(element);
@@ -54,9 +54,13 @@ class BaseModule {
 	 * - timeout = задержка перед отправкой, по умолчанию 0
 	 * @param callback
 	 */
-	_route(callback) {
-		let $content = null,
-			timeout = this._params.ajax.timeout || 0;
+	_route(callback) {
+		if (typeof callback !== 'function') {
+			return this._requestRoute(callback);
+		}
+
+		let $content = null,
+			timeout = this._params.ajax.timeout || 0;
 
 		if (this._isLoaded) return;
 
@@ -133,10 +137,83 @@ class BaseModule {
 			if (this._params.ajax.method.toLowerCase() === 'delete') {
 				ajax.delete(this._params.ajax.route, ajaxData);
 			}
-		}, timeout);
-	}
-
-	_dismissElement() {
+		}, timeout);
+	}
+
+	_requestRoute(options = {}) {
+		const config = this._normalizeRouteRequestOptions(options);
+		return Ajax.requestRoute(config);
+	}
+
+	_buildRouteUrl(params = {}, endpoint = '', options = {}) {
+		const config = this._normalizeRouteRequestOptions(Object.assign({}, options, {
+			params,
+			route: endpoint || options.route || '',
+		}));
+		return Ajax.buildRouteUrl(config.route, {
+			params: config.params,
+			baseParams: config.baseParams,
+		});
+	}
+
+	_normalizeRouteRequestOptions(options = {}) {
+		const requestOptions = this._params && isObject(this._params.request)
+			? this._params.request
+			: {};
+		const ajaxOptions = this._params && isObject(this._params.ajax)
+			? this._params.ajax
+			: {};
+		const source = isObject(options) ? options : {};
+		const route = String(
+			source.route
+			|| source.endpoint
+			|| requestOptions.route
+			|| ajaxOptions.route
+			|| ''
+		).trim();
+		const method = String(
+			source.method
+			|| requestOptions.method
+			|| ajaxOptions.method
+			|| 'GET'
+		).toUpperCase().trim() || 'GET';
+		const credentials = String(
+			source.credentials
+			|| requestOptions.credentials
+			|| 'same-origin'
+		).trim() || 'same-origin';
+		const headers = mergeDeepObject(
+			{
+				'Accept': 'application/json',
+				'X-Requested-With': 'XMLHttpRequest',
+			},
+			isObject(requestOptions.headers) ? requestOptions.headers : {},
+			isObject(source.headers) ? source.headers : {}
+		);
+		const baseParams = mergeDeepObject(
+			{},
+			isObject(requestOptions.params) ? requestOptions.params : {},
+			isObject(source.baseParams) ? source.baseParams : {},
+			isObject(source.paramsBase) ? source.paramsBase : {}
+		);
+		const params = isObject(source.params) ? source.params : {};
+		const body = source.body !== undefined
+			? source.body
+			: (source.data !== undefined ? source.data : null);
+		return {
+			route,
+			method,
+			credentials,
+			headers,
+			baseParams,
+			params,
+			body,
+			signal: source.signal || null,
+			responseType: String(source.responseType || source.parse || 'auto').toLowerCase().trim() || 'auto',
+		};
+	}
+
+	_dismissElement() {
 		let cross = getSVG('cross'),
 			button = this._element.querySelector('.vg-btn-close');
 
@@ -158,17 +235,34 @@ class BaseModule {
 		return Data.get(Selectors.find(element), this.NAME_KEY)
 	}
 
-	static getOrCreateInstance(element, params = {}) {
-		return this.getInstance(element) || new this(element, !isEmptyObj(params) ? params : {})
-	}
-
-	static get DATA_KEY() {
-		return `vg.${this.NAME}`
-	}
+	static getOrCreateInstance(element, params = {}) {
+		return this.getInstance(element) || new this(element, !isEmptyObj(params) ? params : {})
+	}
+
+	static boot(params = {}) {
+		if (typeof this.initAll === 'function') {
+			return this.initAll(params);
+		}
+
+		if (typeof this.init !== 'function') {
+			return null;
+		}
+
+		if (params && Object.prototype.hasOwnProperty.call(params, 'element')) {
+			const { element, ...options } = params;
+			return this.init(element, options);
+		}
+
+		return null;
+	}
+
+	static get DATA_KEY() {
+		return `vg.${this.NAME}`
+	}
 
 	static get EVENT_KEY() {
 		return `.${this.DATA_KEY}`
 	}
 }
 
-export default BaseModule;
+export default BaseModule;

package/app/modules/vgalert/js/vgalert.js

@@ -127,7 +127,7 @@ class VGAlert {
 		const cancelBtn = Selectors.find(`[${DATA_CANCEL}]`, container);
 
 		return new Promise((resolve, reject) => {
-			const closeAlert = () => {
+			const closeAlert = (isHide = true) => {
 				if (type === 'modal') {
 					render.hide();
 					return;
@@ -136,7 +136,7 @@ class VGAlert {
 				if (type === 'overlay') {
 					container.remove();
 
-					if (context._params.render.dismiss) {
+					if (context._params.render.dismiss && isHide) {
 						render.hide();
 					}
 				}
@@ -159,7 +159,7 @@ class VGAlert {
 					accepted: false,
 					timestamp: new Date(),
 				});
-				closeAlert();
+				closeAlert(false);
 			};
 
 			const handleKeydown = (e) => {

package/app/modules/vgdynamictable/index.js

@@ -0,0 +1,5 @@
+import VGDynamicTable from "./js/vgdynamictable";
+import Editable from "./js/editable";
+
+export {Editable, VGDynamicTable};
+export default VGDynamicTable;