vgapp 0.7.9 → 0.8.0

package/app/utils/js/components/backdrop.js

@@ -1,7 +1,8 @@
-import {execute} from "../functions";
-import Selectors from "../dom/selectors";
+import { execute } from "../functions";
 import EventHandler from "../dom/event";
-import Overflow from "./overflow";
+import Html from "../components/templater";
+import { Classes } from "../dom/manipulator";
+import ScrollBarHelper from "./scrollbar";
 
 const NAME = 'backdrop';
 const CLASS_NAME = 'vg-backdrop';
@@ -9,50 +10,72 @@ const CLASS_NAME_FADE = 'fade';
 const CLASS_NAME_SHOW = 'show';
 const EVENT_MOUSEDOWN = `mousedown.vg.${NAME}`;
 
-let backdrop_delay = 500;
+const backdropDelay = 150; // Уменьшено для более плавного UX
 
 class Backdrop {
+	static _rootEl = document.body;
+	static _scrollbar = new ScrollBarHelper();
+	static _backdrop = null;
+
+	/**
+	 * Показывает бэкдроп
+	 * @param {Function} callback - вызывается после отображения
+	 */
 	static show(callback) {
-		Backdrop._append()
+		if (!this._backdrop) {
+			this._append();
+		}
+
 		execute(callback);
 	}
 
+	/**
+	 * Скрывает бэкдроп
+	 * @param {Function} callback - вызывается после скрытия
+	 */
 	static hide(callback) {
-		Backdrop._destroy();
-		execute(callback);
+		if (!this._backdrop) return;
+
+		this._destroy().then(execute.bind(null, callback));
 	}
 
+	/**
+	 * Создаёт и добавляет элемент бэкдропа
+	 * @private
+	 */
 	static _append() {
-		if (Selectors.find('.' + CLASS_NAME)) {
-			return false;
-		}
+		const html = Html('dom');
+		this._backdrop = html.div({ class: CLASS_NAME });
 
-		let backdrop = document.createElement('div');
-		backdrop.classList.add(CLASS_NAME);
-
-		document.body.append(backdrop);
-		backdrop.classList.add(CLASS_NAME_SHOW)
-
-		setTimeout(() => {
-			backdrop.classList.add(CLASS_NAME_FADE)
-		}, 50);
+		this._rootEl.appendChild(this._backdrop);
+		requestAnimationFrame(() => {
+			Classes.add(this._backdrop, CLASS_NAME_SHOW);
+			setTimeout(() => {
+				Classes.add(this._backdrop, CLASS_NAME_FADE);
+			}, backdropDelay);
+		});
 
-		EventHandler.on(backdrop, EVENT_MOUSEDOWN, () => {
-			Backdrop.hide()
-			Overflow.destroy();
+		EventHandler.on(this._backdrop, EVENT_MOUSEDOWN, () => {
+			this.hide();
 		});
 	}
 
+	/**
+	 * Удаляет бэкдроп с анимацией
+	 * @returns {Promise}
+	 * @private
+	 */
 	static _destroy() {
-		let element = Selectors.find('.' + CLASS_NAME);
-		if (!element) return;
-
-		element.classList.remove(CLASS_NAME_FADE);
-
-		setTimeout(() => {
-			element.classList.remove(CLASS_NAME_SHOW);
-			element.remove();
-		}, backdrop_delay);
+		return new Promise((resolve) => {
+			Classes.remove(this._backdrop, CLASS_NAME_FADE);
+			setTimeout(() => {
+				Classes.remove(this._backdrop, CLASS_NAME_SHOW);
+				this._backdrop.remove();
+				this._backdrop = null;
+				this._scrollbar.reset();
+				resolve();
+			}, backdropDelay);
+		});
 	}
 }
 

package/app/utils/js/components/lang.js

@@ -1,108 +1,89 @@
-import {normalizeData} from "../functions";
+import { normalizeData } from "../functions";
 
-const langs = {
-	ru: {
-		messages: {
-			errors: {
-				went_wrong: 'Что-то пошло не так, повторите позже',
-				"400": 'Неверный запрос',
-				"401": 'Не авторизован',
-				"403": 'Запрещено',
-				"404": 'Не найдено',
-				"413": 'Слишком большой запрос',
-				"419": 'Проблемы с токеном CSRF',
-				"422": 'Неверный запрос',
-				"500": 'Внутренняя ошибка сервера',
-				"504": 'Превышено время ожидания'
-			},
-			'form-sender': {
-				'bootstrap_not_found': 'VGApp не удалось найти bootstrap, модалки не будут закрыты, попробуйте сделать это через коллбек afterSend.'
-			},
-			alert: {
-				title: 'Заголовок по умолчанию',
-				description: 'Описание текущего действия',
-				reason: 'Алерт уже открыт'
-			}
-		},
-		titles: {
-			errors: {
-				title: 'Ошибка',
-				titles: 'Ошибки'
-			}
-		},
-		buttons: {
-			alert: {
-				agree: 'Да, согласен',
-				cancel: 'Отмена'
-			}
-		}
-	},
-	en: {
-		messages: {
-			errors: {
-				went_wrong: 'Something went wrong, please repeat later',
-				"400": 'Bad Request',
-				"401": 'Unauthorized',
-				"403": 'Forbidden',
-				"404": 'Not Found',
-				"413": 'Payload Too Large',
-				"419": 'Problems with the CSRF token',
-				"422": 'Unprocessable Entity',
-				"500": 'Internal Server Error',
-				"504": 'Gateway Timeout'
-			},
-			'form-sender': {
-				'bootstrap_not_found': 'VGApp could not find bootstrap, the modals will not be closed, try to do this through the afterSend callback.'
-			},
-			alert: {
-				title: 'Default header',
-				description: 'Description of the current action',
-				reason: 'Alert already open'
-			}
-		},
-		titles: {
-			errors: {
-				title: 'Error',
-				titles: 'Errors'
-			}
-		},
-		buttons: {
-			alert: {
-				agree: 'Yeah, I agree',
-				cancel: 'Cancel'
-			}
-		}
-	},
+// Синхронный импорт JSON-файлов (включаются в бандл Webpack/Vite)
+import messagesRu from '../../../langs/ru/messages.json';
+import titlesRu from '../../../langs/ru/titles.json';
+import buttonsRu from '../../../langs/ru/buttons.json';
+
+import messagesEn from '../../../langs/en/messages.json';
+import titlesEn from '../../../langs/en/titles.json';
+import buttonsEn from '../../../langs/en/buttons.json';
+
+// Синхронные данные, загруженные при сборке
+const langData = {
+	ru: normalizeData({
+		messages: messagesRu,
+		titles: titlesRu,
+		buttons: buttonsRu
+	}),
+	en: normalizeData({
+		messages: messagesEn,
+		titles: titlesEn,
+		buttons: buttonsEn
+	})
 };
 
+/**
+ * Класс для управления языком (синхронный)
+ */
 class Lang {
+	/**
+	 * @param {string} lang - Язык (ru, en и т.д.)
+	 */
 	constructor(lang = 'en') {
 		this.lang = lang;
 	}
 
+	/**
+	 * Получение языкового пакета
+	 * @returns {Object}
+	 */
 	get() {
-		let data = langs[this.lang];
-
-		if (!data) data = langs['en'];
-
-		return normalizeData(data);
+		return langData[this.lang] || langData['en'];
 	}
 }
 
-function lang(lg, mode, module) {
-	return new Lang(lg).get()[mode][module];
+/**
+ * Получение языкового раздела
+ * @param {string} language - Язык
+ * @param {string} mode - messages, titles, buttons
+ * @param {string} module - Модуль (files, alert и т.д.)
+ * @returns {Object}
+ */
+function getLangData(language = 'en', mode, module) {
+	const langInstance = new Lang(language);
+	const data = langInstance.get();
+	return data[mode]?.[module] || {};
 }
 
-function lang_titles(lg, module) {
-	return lang(lg, 'titles', module) || {};
+/**
+ * Получение заголовков
+ * @param {string} language
+ * @param {string} module
+ * @returns {Object}
+ */
+function lang_titles(language, module) {
+	return getLangData(language, 'titles', module);
 }
 
-function lang_messages(lg, module) {
-	return lang(lg, 'messages', module) || {};
+/**
+ * Получение сообщений
+ * @param {string} language
+ * @param {string} module
+ * @returns {Object}
+ */
+function lang_messages(language, module) {
+	return getLangData(language, 'messages', module);
 }
 
-function lang_buttons(lg, module) {
-	return lang(lg, 'buttons', module) || {};
+/**
+ * Получение текстов кнопок
+ * @param {string} language
+ * @param {string} module
+ * @returns {Object}
+ */
+function lang_buttons(language, module) {
+	return getLangData(language, 'buttons', module);
 }
 
-export {lang, lang_messages, lang_titles, lang_buttons};
+export { lang_messages, lang_titles, lang_buttons };

package/app/utils/js/components/params.js

@@ -1,54 +1,57 @@
-import {isElement, mergeDeepObject, normalizeData} from "../functions";
-import {Manipulator} from "../dom/manipulator";
+import { isElement, mergeDeepObject } from "../functions";
+import { Manipulator } from "../dom/manipulator";
 
+/**
+ * Класс Params
+ * Объединяет параметры из объекта и атрибутов элемента, поддерживает вложенные параметры через дефисы
+ */
 class Params {
 	constructor(params, element = null) {
 		this._params = this.merge(params, element);
 	}
 
+	/**
+	 * Возвращает итоговые параметры
+	 */
 	get() {
 		return this._params;
 	}
 
+	/**
+	 * Извлекает параметры из data-атрибутов элемента
+	 */
 	fromElement(element) {
 		return isElement(element) ? Manipulator.get(element) : {};
 	}
 
-	merge(params, element) {
-		let mParams = mergeDeepObject(params, this.fromElement(element));
-
-		function stringToNestedObjectWithValue(str, value, params) {
-			const keys = str.split('-');
-			let result = {};
-			let currentLevel = result;
-
-			for (let i = 0; i < keys.length; i++) {
-				const key = keys[i];
-
-				if (i < keys.length - 1) {
-					currentLevel[key] = {};
-					currentLevel = currentLevel[key];
-				} else {
-					currentLevel[key] = value;
-				}
-			}
+	/**
+	 * Преобразует строку вида 'foo-bar-baz' в вложенный объект { foo: { bar: { baz: value } } }
+	 */
+	static stringToNestedObject(str, value) {
+		return str.split('-').reduceRight((acc, key) => ({ [key]: acc }), value);
+	}
 
-			return mergeDeepObject(params, result);
-		}
+	/**
+	 * Слияние параметров: объект + data-атрибуты + обработка вложенности и ключа 'params'
+	 */
+	merge(params, element) {
+		let merged = mergeDeepObject(params, this.fromElement(element));
 
-		for (let key in mParams) {
-			if ('params' in mParams) {
-				mParams = mergeDeepObject(mParams, mParams.params);
-				delete mParams.params;
+		// Обработка вложенных ключей через дефисы и ключа 'params'
+		Object.keys(merged).forEach(key => {
+			if (key === 'params') {
+				merged = mergeDeepObject(merged, merged.params);
+				delete merged.params;
 			}
 
-			if (key.indexOf('-') !== -1) {
-				mParams = stringToNestedObjectWithValue(key, mParams[key], mParams);
-				delete mParams[key];
+			if (key.includes('-')) {
+				const nestedObj = Params.stringToNestedObject(key, merged[key]);
+				merged = mergeDeepObject(merged, nestedObj);
+				delete merged[key];
 			}
-		}
+		});
 
-		return mParams;
+		return merged;
 	}
 }
 

package/app/utils/js/components/scrollbar.js

@@ -1,114 +1,165 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap util/scrollBar.js
+ * Bootstrap util/scrollBar.js (рефакторинг)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
+ *
+ * Улучшена читаемость, вынесены дублирующиеся операции,
+ * добавлены JSDoc-комментарии, упрощена логика.
  */
 
-import {Manipulator} from "../dom/manipulator";
-import {isElement} from "../functions";
+import { Manipulator } from "../dom/manipulator";
 import Selectors from "../dom/selectors";
+import { isElement } from "../functions";
 
 /**
- * Constants
+ * Константы
  */
-
-const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
-const SELECTOR_STICKY_CONTENT = '.sticky-top'
-const PROPERTY_PADDING = 'padding-right'
-const PROPERTY_MARGIN = 'margin-right'
+const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
+const SELECTOR_STICKY_CONTENT = '.sticky-top';
+const PROPERTY_PADDING = 'padding-right';
+const PROPERTY_MARGIN = 'margin-right';
 
 /**
- * Class definition
+ * Вспомогательный класс для управления скроллбаром
+ * Корректирует отступы при скрытии скролла, сохраняет исходные стили
  */
-
 class ScrollBarHelper {
 	constructor() {
-		this._element = document.body
+		this._element = document.body;
 	}
 
-	// Public
+	/**
+	 * Возвращает ширину вертикального скроллбара
+	 * @returns {number}
+	 */
 	getWidth() {
-		// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-		const documentWidth = document.documentElement.clientWidth
-		return Math.abs(window.innerWidth - documentWidth)
+		const documentWidth = document.documentElement.clientWidth;
+		return Math.abs(window.innerWidth - documentWidth);
+	}
+
+	/**
+	 * Проверяет, есть ли скроллбар (ширина > 0)
+	 * @returns {boolean}
+	 */
+	isOverflowing() {
+		return this.getWidth() > 0;
 	}
 
+	/**
+	 * Скрывает скроллбар и корректирует макет
+	 */
 	hide() {
-		const width = this.getWidth()
-		this._disableOverFlow()
-		// give padding to element to balance the hidden scrollbar width
-		this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
-		// trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
-		this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
-		this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width)
+		const width = this.getWidth();
+		if (width === 0) return;
+
+		this._disableOverflow();
+
+		this._setStyle(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, width, (value) => value + width);
+		this._setStyle(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, width, (value) => value - width);
+		this._setStyle(this._element, PROPERTY_PADDING, width, (value) => value + width);
 	}
 
+	/**
+	 * Сбрасывает стили до исходных значений
+	 */
 	reset() {
-		this._resetElementAttributes(this._element, 'overflow')
-		this._resetElementAttributes(this._element, PROPERTY_PADDING)
-		this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING)
-		this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN)
+		this._resetStyle(this._element, "overflow");
+		this._resetStyle(this._element, PROPERTY_PADDING);
+		this._resetStyle(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING);
+		this._resetStyle(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN);
 	}
 
-	isOverflowing() {
-		return this.getWidth() > 0
-	}
+	// === Приватные методы ===
 
-	// Private
-	_disableOverFlow() {
-		this._saveInitialAttribute(this._element, 'overflow')
-		this._element.style.overflow = 'hidden'
+	/**
+	 * Блокирует overflow у body
+	 * @private
+	 */
+	_disableOverflow() {
+		this._saveInitialStyle(this._element, "overflow");
+		this._element.style.overflow = "hidden";
 	}
 
-	_setElementAttributes(selector, styleProperty, callback) {
-		const scrollbarWidth = this.getWidth()
-		const manipulationCallBack = element => {
-			if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
-				return
+	/**
+	 * Устанавливает стили с сохранением начальных значений
+	 * @param {string|HTMLElement} selector
+	 * @param {string} property
+	 * @param {number} width
+	 * @param {(value: number) => number} callback
+	 * @private
+	 */
+	_setStyle(selector, property, width, callback) {
+		const apply = (element) => {
+			// Исключаем элементы, у которых и так нет места под скролл
+			if (element !== this._element && window.innerWidth > element.clientWidth + width) {
+				return;
 			}
 
-			this._saveInitialAttribute(element, styleProperty)
-			const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
-			element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`)
-		}
+			this._saveInitialStyle(element, property);
 
-		this._applyManipulationCallback(selector, manipulationCallBack)
-	}
+			const current = getComputedStyle(element).getPropertyValue(property);
+			const value = Number.parseFloat(current) || 0;
 
-	_saveInitialAttribute(element, styleProperty) {
-		const actualValue = element.style.getPropertyValue(styleProperty)
-		if (actualValue) {
-			Manipulator.get(element, styleProperty, actualValue)
-		}
+			element.style.setProperty(property, `${callback(value)}px`);
+		};
+
+		this._applyToElements(selector, apply);
 	}
 
-	_resetElementAttributes(selector, styleProperty) {
-		const manipulationCallBack = element => {
-			const value = Manipulator.get(element, styleProperty)
-			// We only want to remove the property if the value is `null`; the value can also be zero
+	/**
+	 * Сбрасывает стили до сохранённых значений
+	 * @param {string|HTMLElement} selector
+	 * @param {string} property
+	 * @private
+	 */
+	_resetStyle(selector, property) {
+		const apply = (element) => {
+			const value = Manipulator.get(element, property);
+
 			if (value === null) {
-				element.style.removeProperty(styleProperty)
-				return
+				element.style.removeProperty(property);
+				return;
 			}
 
-			Manipulator.remove(element, styleProperty)
-			element.style.setProperty(styleProperty, value)
-		}
+			Manipulator.remove(element, property);
+			element.style.setProperty(property, value);
+		};
 
-		this._applyManipulationCallback(selector, manipulationCallBack)
+		this._applyToElements(selector, apply);
 	}
 
-	_applyManipulationCallback(selector, callBack) {
-		if (isElement(selector)) {
-			callBack(selector)
-			return
+	/**
+	 * Сохраняет текущее значение inline-стиля через Manipulator
+	 * (включая пустое значение, чтобы reset() работал стабильно).
+	 * @param {HTMLElement} element
+	 * @param {string} property
+	 * @private
+	 */
+	_saveInitialStyle(element, property) {
+		const value = element.style.getPropertyValue(property);
+
+		// Важно: сохраняем даже пустую строку (если inline-стиля не было)
+		// чтобы reset() мог корректно восстановить "как было".
+		if (value !== null) {
+			Manipulator.set(element, property, value);
 		}
+	}
 
-		for (const sel of Selectors.findAll(selector, this._element)) {
-			callBack(sel)
+	/**
+	 * Применяет callback к элементу или списку элементов
+	 * @param {string|HTMLElement} selector
+	 * @param {(element: HTMLElement) => void} callback
+	 * @private
+	 */
+	_applyToElements(selector, callback) {
+		if (isElement(selector)) {
+			callback(selector);
+			return;
 		}
+
+		Selectors.findAll(selector, this._element).forEach(callback);
 	}
 }
 
-export default ScrollBarHelper
+export default ScrollBarHelper;

package/app/utils/js/components/templater.js

@@ -213,13 +213,23 @@ class LaravelHtmlBuilder {
 		return this.element('textarea', { name, ...attributes }, content);
 	}
 
-	ul(items = [], attributes = {}) {
-		const listItems = items.map(item =>
-			this.element('li', {}, item)
-		);
+	ul(items = [], attributes = {}, isNative = false) {
+		let listItems = [];
+
+		if (!isNative) {
+			listItems = items.map(item =>
+				this.element('li', {}, item)
+			);
+		} else {
+			listItems = items
+		}
 		return this.element('ul', attributes, listItems);
 	}
 
+	li(attributes = {}, content, options) {
+		return this.element('li', attributes, content, options);
+	}
+
 	ol(items = [], attributes = {}) {
 		const listItems = items.map(item =>
 			this.element('li', {}, item)