vgapp 0.7.6 → 0.7.8

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# VEGAS-APP 0.7.7 - 0.7.8 (Декабрь, 18, 2025)
+* Дополнен модуль VGFormSender. В директории модуля появился файл readme.md. Добавлен JSDoc
+* Удалена набор функций Ajax в module-fn и добавлен самостоятельный класс Ajax с более продвинутой логикой работы с XHR
+* Добавлен в компоненты класс LaravelHtmlBuilder, на лету создающий шаблоны и элементы 
+```js
+  const tmpl = Html('dom'); // или 'string'
+  let elm = tmpl.div({...attrbuttes}, 'text');
+```
+* Начата работа над компонентом Lang доступные функции `lang_titles(lang, module)` и `lang_messages(lang, module)` (в разработке)
+* Исправлены ошибки в разных модулях
+
+---
 # VEGAS-APP 0.7.6 (Декабрь, 13, 2025)
 * Исправлена анимация в модуле VGToast
 * Добавлены темы `theme:` `['success', 'info', 'warning', 'danger', 'dark']` для модуля VGToast
@@ -6,11 +18,10 @@
 ---
 
 # VEGAS-APP 0.7.5 (Декабрь, 08, 2025)
-* В модуль VGFORSENDER добавлен параметр `fields` для программного добавление новых полей в FormData,
+* В модуль VGFORMSENDER добавлен параметр `fields` для программного добавление новых полей в FormData,
 если в значении объекта окажется массив или объект, то сформируется json строка
-```
+```js
 {
-  ...
   fields: [
     {
       name: Andranik,
@@ -24,7 +35,7 @@
 }
 ```
 * Хак на кнопку отправки `onclick` можно повесить колбек на событие
-```
+```html
 <button type="submit" class="btn btn-primary"
   onclick='vg.VGFormSender.buttonClick("#form-simple", function (form, self) {
     self._button.innerHTML = `<span class="spinner-border spinner-border-sm"></span>`;

package/app/modules/base-module.js

@@ -3,8 +3,10 @@ import Selectors from "../utils/js/dom/selectors";
 import Data from "../utils/js/dom/data";
 import Params from "../utils/js/components/params";
 import EventHandler from "../utils/js/dom/event";
-import {Ajax, getSVG} from "./module-fn";
+import {getSVG} from "./module-fn";
 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) {
@@ -33,14 +35,28 @@ class BaseModule {
 		}
 	}
 
+	/**
+	 * Метод для отправки данных на сервер
+	 * данные для работы должны быть в this._params.ajax
+	 * - route = ссылка для отправки данных, обязательное поле
+	 * - method = по умолчанию get
+	 * - target = элемент (#container-request), куда будут выгружен ответ сервер, тип строка
+	 * - loader = спиннер загрузки использует класс vg-loader (в дефолтных стилях), по умолчанию false
+	 * - once = сделает всего один запрос (например: при открытии модалки несколько раз), по умолчанию false
+	 * - output = Разрешает или запрещает добавление контента с сервера в целевой блок, по умолчанию false
+	 * - timeout = задержка перед отправкой, по умолчанию 0
+	 * @param callback
+	 */
 	_route(callback) {
 		let $content = null,
 			timeout = this._params.ajax.timeout || 0;
 
 		if (this._isLoaded) return;
 
-		const setData = (data) => {
-			if ($content) $content.innerHTML = data;
+		const setData = (response) => {
+			if (typeof response === "string") {
+				if ($content) $content.innerHTML = response;
+			}
 		};
 
 		if (!this._params.hasOwnProperty('ajax')) {
@@ -59,25 +75,44 @@ class BaseModule {
 			$content = Selectors.find(this._params.ajax.target);
 		}
 
-		if ('loader' in this._params.ajax && this._params.ajax.loader) {
+		if (('loader' in this._params.ajax && this._params.ajax.loader) && ('output' in this._params.ajax && this._params.ajax.output)) {
+			setData(Html('string').div({class: 'vg-loader'}));
+		}
+
+		let completeAjaxRequest = (data, status) => {
+			if ('loader' in this._params.ajax && this._params.ajax.loader) setData('');
+
+			if ('once' in this._params.ajax && this._params.ajax.once) {
+				this._isLoaded = true;
+			}
+
 			if ('output' in this._params.ajax && this._params.ajax.output) {
-				setData('<div class="vg-loader"></div>');
+				setData(data.response);
+			}
+
+			execute(callback, [status, data, $content]);
+		}
+
+		const ajax = new Ajax();
+
+		let ajaxData = {
+			onSuccess: (data) => {
+				completeAjaxRequest(data, 'success')
+			},
+			onError: (err) => {
+				completeAjaxRequest(err, 'error')
 			}
 		}
 
 		setTimeout(() => {
-			Ajax[this._params.ajax.method](this._params.ajax.route, this._params.ajax.data || {}, (status, data) => {
-				if ('once' in this._params.ajax && this._params.ajax.once) {
-					this._isLoaded = true;
-				}
-
-				if ('output' in this._params.ajax && this._params.ajax.output) {
-					setData(data.response);
-				}
-
-				execute(callback, [status, data, $content]);
-			});
-		}, timeout)
+			if (this._params.ajax.method.toLowerCase() === 'get') {
+				ajax.get(this._params.ajax.route, ajaxData);
+			}
+
+			if (this._params.ajax.method.toLowerCase() === 'post') {
+				ajax.post(this._params.ajax.route, this._params.ajax.data, ajaxData);
+			}
+		}, timeout);
 	}
 
 	_dismissElement() {

package/app/modules/module-fn.js

@@ -13,13 +13,15 @@ import Selectors from "../utils/js/dom/selectors";
  */
 const getSVG = (name) => {
 	const svg =  {
-		danger:   '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C53.3953 4.5 67.5 18.6047 67.5 36C67.5 53.3953 53.3953 67.5 36 67.5C18.6047 67.5 4.5 53.3953 4.5 36C4.5 18.6047 18.6047 4.5 36 4.5ZM44.9961 23.8237C44.9944 23.8242 44.9931 23.825 44.9902 23.8279L36 32.818L27.0098 23.8279C27.0069 23.825 27.0056 23.8242 27.0039 23.8237C27.0023 23.8232 27.0006 23.8232 26.999 23.8237C26.9975 23.8242 26.9961 23.825 26.9932 23.8279L23.8278 26.9932C23.825 26.9961 23.8243 26.9975 23.8237 26.9991C23.8232 27.0007 23.8232 27.0024 23.8237 27.004L23.8244 27.0056C23.8253 27.0071 23.8265 27.0085 23.8279 27.0098L32.818 36L23.8279 44.9903C23.825 44.9931 23.8242 44.9945 23.8237 44.9961C23.8232 44.9977 23.8232 44.9995 23.8237 45.0011C23.8242 45.0026 23.825 45.0039 23.8279 45.0068L26.9932 48.1723C26.9961 48.1751 26.9975 48.1758 26.9991 48.1764C27.0007 48.1769 27.0024 48.1769 27.004 48.1764C27.0056 48.1759 27.0069 48.1751 27.0098 48.1722L36 39.1819L44.9903 48.1721C44.9931 48.175 44.9945 48.1758 44.9961 48.1763C44.9977 48.1768 44.9995 48.1768 45.0011 48.1763C45.0026 48.1758 45.0039 48.175 45.0068 48.1721L48.1723 45.0068C48.1751 45.0039 48.1758 45.0025 48.1764 45.0009C48.1769 44.9993 48.1769 44.9976 48.1764 44.996L48.1757 44.9944C48.1747 44.9929 48.1736 44.9915 48.1722 44.9902L39.1819 36L48.1721 27.0098C48.175 27.0069 48.1758 27.0056 48.1763 27.0039C48.1768 27.0023 48.1768 27.0006 48.1763 26.999C48.1758 26.9975 48.175 26.9961 48.1721 26.9932L45.0068 23.8278C45.0039 23.825 45.0025 23.8243 45.0009 23.8237C44.9993 23.8232 44.9977 23.8232 44.9961 23.8237Z" fill="#000000"/></svg>',
-		success: '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM49.6055 25.7133L34.7977 46.2445C34.5907 46.5334 34.3179 46.7688 34.0018 46.9312C33.6857 47.0935 33.3354 47.1782 32.9801 47.1782C32.6247 47.1782 32.2745 47.0935 31.9584 46.9312C31.6423 46.7688 31.3695 46.5334 31.1625 46.2445L22.3945 34.0945C22.1273 33.7219 22.3945 33.2016 22.8516 33.2016H26.1492C26.8664 33.2016 27.5484 33.5461 27.9703 34.1367L32.9766 41.0836L44.0297 25.7555C44.4516 25.1719 45.1266 24.8203 45.8508 24.8203H49.1484C49.6055 24.8203 49.8727 25.3406 49.6055 25.7133Z" fill="#000000"/></svg>',
-		waiting: '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51 10.02C55.5248 12.6326 59.2888 16.3816 61.9194 20.8959C64.5501 25.4103 65.9561 30.5334 65.9983 35.7581C66.0405 40.9828 64.7174 46.1279 62.1601 50.6841C59.6027 55.2404 55.8997 59.0497 51.4177 61.735C46.9357 64.4203 41.8301 65.8885 36.6063 65.9942C31.3825 66.1 26.2216 64.8395 21.6347 62.3378C17.0477 59.836 13.1936 56.1796 10.454 51.7306C7.71439 47.2816 6.18423 42.1942 6.015 36.972L6 36L6.015 35.028C6.18301 29.847 7.69064 24.7979 10.3909 20.373C13.0912 15.9481 16.892 12.2984 21.4227 9.77969C25.9534 7.26098 31.0594 5.95923 36.243 6.00136C41.4266 6.04348 46.5108 7.42804 51 10.02ZM36 18C35.2652 18.0001 34.556 18.2699 34.0069 18.7582C33.4578 19.2465 33.107 19.9193 33.021 20.649L33 21V36L33.027 36.393C33.0954 36.9135 33.2992 37.407 33.618 37.824L33.879 38.124L42.879 47.124L43.161 47.37C43.6871 47.7782 44.3341 47.9998 45 47.9998C45.6659 47.9998 46.3129 47.7782 46.839 47.37L47.121 47.121L47.37 46.839C47.7782 46.3129 47.9998 45.6659 47.9998 45C47.9998 44.3341 47.7782 43.6872 47.37 43.161L47.121 42.879L39 34.755V21L38.979 20.649C38.893 19.9193 38.5422 19.2465 37.9931 18.7582C37.444 18.2699 36.7348 18.0001 36 18Z" fill="black"/></svg>',
-		warning: '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.5 5C44.8543 5 52.8665 8.31874 58.7739 14.2261C64.6813 20.1335 68 28.1457 68 36.5C68 44.8543 64.6813 52.8665 58.7739 58.7739C52.8665 64.6813 44.8543 68 36.5 68C28.1457 68 20.1335 64.6813 14.2261 58.7739C8.31874 52.8665 5 44.8543 5 36.5C5 28.1457 8.31874 20.1335 14.2261 14.2261C20.1335 8.31874 28.1457 5 36.5 5ZM36.5 18.5C35.9287 18.4995 35.3635 18.6181 34.8406 18.8484C34.3178 19.0786 33.8487 19.4154 33.4633 19.8372C33.0779 20.259 32.7848 20.7565 32.6025 21.298C32.4203 21.8395 32.353 22.413 32.405 22.982L34.0475 41.009C34.1112 41.6151 34.397 42.1761 34.8499 42.5839C35.3028 42.9917 35.8906 43.2173 36.5 43.2173C37.1094 43.2173 37.6972 42.9917 38.1501 42.5839C38.603 42.1761 38.8888 41.6151 38.9525 41.009L40.5905 22.982C40.6424 22.4134 40.5753 21.8403 40.3933 21.2991C40.2114 20.7579 39.9186 20.2606 39.5337 19.8389C39.1488 19.4171 38.6803 19.0803 38.1579 18.8498C37.6356 18.6192 37.0709 18.5001 36.5 18.5ZM36.5 54.5C37.4548 54.5 38.3705 54.1207 39.0456 53.4456C39.7207 52.7705 40.1 51.8548 40.1 50.9C40.1 49.9452 39.7207 49.0295 39.0456 48.3544C38.3705 47.6793 37.4548 47.3 36.5 47.3C35.5452 47.3 34.6295 47.6793 33.9544 48.3544C33.2793 49.0295 32.9 49.9452 32.9 50.9C32.9 51.8548 33.2793 52.7705 33.9544 53.4456C34.6295 54.1207 35.5452 54.5 36.5 54.5Z" fill="#000000"/></svg>',
-		info:    '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM33.75 20.8125C33.75 20.5031 34.0031 20.25 34.3125 20.25H37.6875C37.9969 20.25 38.25 20.5031 38.25 20.8125V39.9375C38.25 40.2469 37.9969 40.5 37.6875 40.5H34.3125C34.0031 40.5 33.75 40.2469 33.75 39.9375V20.8125ZM36 51.75C35.1168 51.732 34.2759 51.3685 33.6577 50.7375C33.0395 50.1065 32.6932 49.2584 32.6932 48.375C32.6932 47.4916 33.0395 46.6435 33.6577 46.0125C34.2759 45.3815 35.1168 45.018 36 45C36.8832 45.018 37.7241 45.3815 38.3423 46.0125C38.9605 46.6435 39.3068 47.4916 39.3068 48.375C39.3068 49.2584 38.9605 50.1065 38.3423 50.7375C37.7241 51.3685 36.8832 51.732 36 51.75Z" fill="#000000"/></svg>',
-		dots:    '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17C11.1046 17 12 16.1046 12 15C12 13.8954 11.1046 13 10 13C8.89543 13 8 13.8954 8 15C8 16.1046 8.89543 17 10 17Z" fill="black"/><path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" fill="black"/><path d="M10 7C11.1046 7 12 6.10457 12 5C12 3.89543 11.1046 3 10 3C8.89543 3 8 3.89543 8 5C8 6.10457 8.89543 7 10 7Z" fill="black"/></svg>',
-		cross:   '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.3149 0.340332C15.4478 0.20752 15.6027 0.118978 15.7798 0.074707C15.9569 0.0249023 16.134 0.0249023 16.311 0.074707C16.4881 0.118978 16.6431 0.20752 16.7759 0.340332C16.9142 0.473145 17.0055 0.630859 17.0498 0.813477C17.0941 0.99056 17.0941 1.16764 17.0498 1.34473C17.0055 1.52181 16.917 1.67676 16.7842 1.80957L1.80127 16.8008C1.67399 16.9281 1.52181 17.0111 1.34473 17.0498C1.16764 17.0941 0.987793 17.0941 0.805176 17.0498C0.628092 17.0111 0.470378 16.9253 0.332031 16.7925C0.199219 16.6597 0.110677 16.502 0.0664062 16.3193C0.0221354 16.1423 0.0221354 15.9652 0.0664062 15.7881C0.110677 15.611 0.196452 15.4588 0.32373 15.3315L15.3149 0.340332ZM16.7842 15.3232C16.917 15.4561 17.0028 15.6082 17.0415 15.7798C17.0858 15.9569 17.0858 16.134 17.0415 16.311C17.0028 16.4937 16.9142 16.6541 16.7759 16.7925C16.6431 16.9253 16.4881 17.0138 16.311 17.0581C16.134 17.1024 15.9569 17.1024 15.7798 17.0581C15.6027 17.0138 15.4478 16.9253 15.3149 16.7925L0.32373 1.80127C0.201986 1.67952 0.116211 1.53011 0.0664062 1.35303C0.0221354 1.17594 0.0221354 0.996094 0.0664062 0.813477C0.116211 0.630859 0.204753 0.473145 0.332031 0.340332C0.464844 0.20752 0.622559 0.118978 0.805176 0.074707C0.987793 0.0304362 1.16488 0.0304362 1.33643 0.074707C1.51351 0.118978 1.66846 0.204753 1.80127 0.332031L16.7842 15.3232Z" fill="#000"/></svg>',
+		danger:     '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C53.3953 4.5 67.5 18.6047 67.5 36C67.5 53.3953 53.3953 67.5 36 67.5C18.6047 67.5 4.5 53.3953 4.5 36C4.5 18.6047 18.6047 4.5 36 4.5ZM44.9961 23.8237C44.9944 23.8242 44.9931 23.825 44.9902 23.8279L36 32.818L27.0098 23.8279C27.0069 23.825 27.0056 23.8242 27.0039 23.8237C27.0023 23.8232 27.0006 23.8232 26.999 23.8237C26.9975 23.8242 26.9961 23.825 26.9932 23.8279L23.8278 26.9932C23.825 26.9961 23.8243 26.9975 23.8237 26.9991C23.8232 27.0007 23.8232 27.0024 23.8237 27.004L23.8244 27.0056C23.8253 27.0071 23.8265 27.0085 23.8279 27.0098L32.818 36L23.8279 44.9903C23.825 44.9931 23.8242 44.9945 23.8237 44.9961C23.8232 44.9977 23.8232 44.9995 23.8237 45.0011C23.8242 45.0026 23.825 45.0039 23.8279 45.0068L26.9932 48.1723C26.9961 48.1751 26.9975 48.1758 26.9991 48.1764C27.0007 48.1769 27.0024 48.1769 27.004 48.1764C27.0056 48.1759 27.0069 48.1751 27.0098 48.1722L36 39.1819L44.9903 48.1721C44.9931 48.175 44.9945 48.1758 44.9961 48.1763C44.9977 48.1768 44.9995 48.1768 45.0011 48.1763C45.0026 48.1758 45.0039 48.175 45.0068 48.1721L48.1723 45.0068C48.1751 45.0039 48.1758 45.0025 48.1764 45.0009C48.1769 44.9993 48.1769 44.9976 48.1764 44.996L48.1757 44.9944C48.1747 44.9929 48.1736 44.9915 48.1722 44.9902L39.1819 36L48.1721 27.0098C48.175 27.0069 48.1758 27.0056 48.1763 27.0039C48.1768 27.0023 48.1768 27.0006 48.1763 26.999C48.1758 26.9975 48.175 26.9961 48.1721 26.9932L45.0068 23.8278C45.0039 23.825 45.0025 23.8243 45.0009 23.8237C44.9993 23.8232 44.9977 23.8232 44.9961 23.8237Z" fill="#000000"/></svg>',
+		success:    '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM49.6055 25.7133L34.7977 46.2445C34.5907 46.5334 34.3179 46.7688 34.0018 46.9312C33.6857 47.0935 33.3354 47.1782 32.9801 47.1782C32.6247 47.1782 32.2745 47.0935 31.9584 46.9312C31.6423 46.7688 31.3695 46.5334 31.1625 46.2445L22.3945 34.0945C22.1273 33.7219 22.3945 33.2016 22.8516 33.2016H26.1492C26.8664 33.2016 27.5484 33.5461 27.9703 34.1367L32.9766 41.0836L44.0297 25.7555C44.4516 25.1719 45.1266 24.8203 45.8508 24.8203H49.1484C49.6055 24.8203 49.8727 25.3406 49.6055 25.7133Z" fill="#000000"/></svg>',
+		waiting:    '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51 10.02C55.5248 12.6326 59.2888 16.3816 61.9194 20.8959C64.5501 25.4103 65.9561 30.5334 65.9983 35.7581C66.0405 40.9828 64.7174 46.1279 62.1601 50.6841C59.6027 55.2404 55.8997 59.0497 51.4177 61.735C46.9357 64.4203 41.8301 65.8885 36.6063 65.9942C31.3825 66.1 26.2216 64.8395 21.6347 62.3378C17.0477 59.836 13.1936 56.1796 10.454 51.7306C7.71439 47.2816 6.18423 42.1942 6.015 36.972L6 36L6.015 35.028C6.18301 29.847 7.69064 24.7979 10.3909 20.373C13.0912 15.9481 16.892 12.2984 21.4227 9.77969C25.9534 7.26098 31.0594 5.95923 36.243 6.00136C41.4266 6.04348 46.5108 7.42804 51 10.02ZM36 18C35.2652 18.0001 34.556 18.2699 34.0069 18.7582C33.4578 19.2465 33.107 19.9193 33.021 20.649L33 21V36L33.027 36.393C33.0954 36.9135 33.2992 37.407 33.618 37.824L33.879 38.124L42.879 47.124L43.161 47.37C43.6871 47.7782 44.3341 47.9998 45 47.9998C45.6659 47.9998 46.3129 47.7782 46.839 47.37L47.121 47.121L47.37 46.839C47.7782 46.3129 47.9998 45.6659 47.9998 45C47.9998 44.3341 47.7782 43.6872 47.37 43.161L47.121 42.879L39 34.755V21L38.979 20.649C38.893 19.9193 38.5422 19.2465 37.9931 18.7582C37.444 18.2699 36.7348 18.0001 36 18Z" fill="black"/></svg>',
+		warning:    '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.5 5C44.8543 5 52.8665 8.31874 58.7739 14.2261C64.6813 20.1335 68 28.1457 68 36.5C68 44.8543 64.6813 52.8665 58.7739 58.7739C52.8665 64.6813 44.8543 68 36.5 68C28.1457 68 20.1335 64.6813 14.2261 58.7739C8.31874 52.8665 5 44.8543 5 36.5C5 28.1457 8.31874 20.1335 14.2261 14.2261C20.1335 8.31874 28.1457 5 36.5 5ZM36.5 18.5C35.9287 18.4995 35.3635 18.6181 34.8406 18.8484C34.3178 19.0786 33.8487 19.4154 33.4633 19.8372C33.0779 20.259 32.7848 20.7565 32.6025 21.298C32.4203 21.8395 32.353 22.413 32.405 22.982L34.0475 41.009C34.1112 41.6151 34.397 42.1761 34.8499 42.5839C35.3028 42.9917 35.8906 43.2173 36.5 43.2173C37.1094 43.2173 37.6972 42.9917 38.1501 42.5839C38.603 42.1761 38.8888 41.6151 38.9525 41.009L40.5905 22.982C40.6424 22.4134 40.5753 21.8403 40.3933 21.2991C40.2114 20.7579 39.9186 20.2606 39.5337 19.8389C39.1488 19.4171 38.6803 19.0803 38.1579 18.8498C37.6356 18.6192 37.0709 18.5001 36.5 18.5ZM36.5 54.5C37.4548 54.5 38.3705 54.1207 39.0456 53.4456C39.7207 52.7705 40.1 51.8548 40.1 50.9C40.1 49.9452 39.7207 49.0295 39.0456 48.3544C38.3705 47.6793 37.4548 47.3 36.5 47.3C35.5452 47.3 34.6295 47.6793 33.9544 48.3544C33.2793 49.0295 32.9 49.9452 32.9 50.9C32.9 51.8548 33.2793 52.7705 33.9544 53.4456C34.6295 54.1207 35.5452 54.5 36.5 54.5Z" fill="#000000"/></svg>',
+		info:       '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM33.75 20.8125C33.75 20.5031 34.0031 20.25 34.3125 20.25H37.6875C37.9969 20.25 38.25 20.5031 38.25 20.8125V39.9375C38.25 40.2469 37.9969 40.5 37.6875 40.5H34.3125C34.0031 40.5 33.75 40.2469 33.75 39.9375V20.8125ZM36 51.75C35.1168 51.732 34.2759 51.3685 33.6577 50.7375C33.0395 50.1065 32.6932 49.2584 32.6932 48.375C32.6932 47.4916 33.0395 46.6435 33.6577 46.0125C34.2759 45.3815 35.1168 45.018 36 45C36.8832 45.018 37.7241 45.3815 38.3423 46.0125C38.9605 46.6435 39.3068 47.4916 39.3068 48.375C39.3068 49.2584 38.9605 50.1065 38.3423 50.7375C37.7241 51.3685 36.8832 51.732 36 51.75Z" fill="#000000"/></svg>',
+		dots:       '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17C11.1046 17 12 16.1046 12 15C12 13.8954 11.1046 13 10 13C8.89543 13 8 13.8954 8 15C8 16.1046 8.89543 17 10 17Z" fill="black"/><path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" fill="black"/><path d="M10 7C11.1046 7 12 6.10457 12 5C12 3.89543 11.1046 3 10 3C8.89543 3 8 3.89543 8 5C8 6.10457 8.89543 7 10 7Z" fill="black"/></svg>',
+		cross:      '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.3149 0.340332C15.4478 0.20752 15.6027 0.118978 15.7798 0.074707C15.9569 0.0249023 16.134 0.0249023 16.311 0.074707C16.4881 0.118978 16.6431 0.20752 16.7759 0.340332C16.9142 0.473145 17.0055 0.630859 17.0498 0.813477C17.0941 0.99056 17.0941 1.16764 17.0498 1.34473C17.0055 1.52181 16.917 1.67676 16.7842 1.80957L1.80127 16.8008C1.67399 16.9281 1.52181 17.0111 1.34473 17.0498C1.16764 17.0941 0.987793 17.0941 0.805176 17.0498C0.628092 17.0111 0.470378 16.9253 0.332031 16.7925C0.199219 16.6597 0.110677 16.502 0.0664062 16.3193C0.0221354 16.1423 0.0221354 15.9652 0.0664062 15.7881C0.110677 15.611 0.196452 15.4588 0.32373 15.3315L15.3149 0.340332ZM16.7842 15.3232C16.917 15.4561 17.0028 15.6082 17.0415 15.7798C17.0858 15.9569 17.0858 16.134 17.0415 16.311C17.0028 16.4937 16.9142 16.6541 16.7759 16.7925C16.6431 16.9253 16.4881 17.0138 16.311 17.0581C16.134 17.1024 15.9569 17.1024 15.7798 17.0581C15.6027 17.0138 15.4478 16.9253 15.3149 16.7925L0.32373 1.80127C0.201986 1.67952 0.116211 1.53011 0.0664062 1.35303C0.0221354 1.17594 0.0221354 0.996094 0.0664062 0.813477C0.116211 0.630859 0.204753 0.473145 0.332031 0.340332C0.464844 0.20752 0.622559 0.118978 0.805176 0.074707C0.987793 0.0304362 1.16488 0.0304362 1.33643 0.074707C1.51351 0.118978 1.66846 0.204753 1.80127 0.332031L16.7842 15.3232Z" fill="#000"/></svg>',
+		'eye-open': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>',
+		'eye-hide': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg>',
 	};
 
 	return svg[name] ?? '';
@@ -48,80 +50,6 @@ const dismissTrigger = (module, method = 'hide') => {
 	})
 }
 
-/**
- * AJAX REQUEST
- * @type {{post: ajax.post, get: ajax.get, x: ((function(): (XMLHttpRequest))|*), send: ajax.send}}
- */
-const Ajax = {
-	x: function () {
-		if (typeof XMLHttpRequest !== 'undefined') {
-			return new XMLHttpRequest();
-		}
-		let versions = [
-			"MSXML2.XmlHttp.6.0",
-			"MSXML2.XmlHttp.5.0",
-			"MSXML2.XmlHttp.4.0",
-			"MSXML2.XmlHttp.3.0",
-			"MSXML2.XmlHttp.2.0",
-			"Microsoft.XmlHttp"
-		];
-
-		let xhr;
-		for (let i = 0; i < versions.length; i++) {
-			try {
-				xhr = new ActiveXObject(versions[i]);
-				break;
-			} catch (e) {}
-		}
-
-		return xhr;
-	},
-
-	send: function (url, callback, method, data, async) {
-		if (async === undefined) {
-			async = true;
-		}
-		let x = Ajax.x();
-		x.open(method, url, async);
-		x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-		x.onreadystatechange = function () {
-			if (x.readyState === 4) {
-				switch (x.status) {
-					case 200:
-						callback('success', {text: x.statusText, response: x.responseText, code: x.status})
-						break;
-					default:
-						callback('error', {text: x.statusText, response: x.responseText, code: x.status})
-						break;
-				}
-			}
-		};
-		x.send(data)
-	},
-
-	get: function (url, data, callback, async) {
-		let query = [];
-
-		if (!isEmptyObj(data)) {
-			for (let key in data) {
-				query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
-			}
-		}
-
-		let uri = '';
-		if (query.length) {
-			uri += url.includes('?') ? '&' : '?';
-			uri += query.join('&');
-		}
-
-		Ajax.send(url + uri, callback, 'GET', null, async)
-	},
-
-	post: function (url, data, callback, async) {
-		Ajax.send(url, callback, 'POST', data, async)
-	}
-};
-
 export {
-	dismissTrigger, Ajax, getSVG
+	dismissTrigger, getSVG
 }

package/app/modules/vgdropdown/js/vgdropdown.js

@@ -6,7 +6,6 @@ import Placement from "../../../utils/js/components/placement";
 import Overflow from "../../../utils/js/components/overflow";
 import Backdrop from "../../../utils/js/components/backdrop";
 import {dismissTrigger} from "../../module-fn";
-import VGSidebar from "../../vgsidebar";
 
 const NAME             = 'dropdown';
 const NAME_KEY         = 'vg.dropdown';
@@ -33,12 +32,11 @@ class VGDropdown extends BaseModule {
 		super(element, params);
 
 		let defaultParams = {
-			offset: [0, 2],
 			backdrop: false,
 			overflow: false,
 			keyboard: false,
-			placement: 'bottom',
 			timeoutAnimation: 10,
+			placement: 'auto',
 			hover: false,
 			ajax: {
 				route: '',
@@ -49,30 +47,27 @@ class VGDropdown extends BaseModule {
 				output: true,
 			},
 			animation: {
-				fade: false,
+				fade: true,
 				enable: false,
 				in: 'animate__flipInY',
 				out: 'animate__flipOutY',
-				delay: 800,
+				delay: 300,
 			},
-		}
-
-		if ('offset' in params && Array.isArray(params.offset)) {
-			defaultParams.offset = params.offset;
-		}
+		};
 
 		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
 
 		const target = Selectors.getElementFromSelector(this._element);
-
 		this._parent = this._element.parentNode;
-		this._drop = target || Selectors.find('.' + TARGET_CONTAINER, this._parent);
-		this._isPlacement = false;
+		this._drop = target || Selectors.find(`.${TARGET_CONTAINER}`, this._parent);
+
+		if (!this._drop) return;
 
-		this.isFade      = this._params.animation.fade;
+		this._isPlacement = false;
+		this.isFade = this._params.animation.fade;
 		this.isAnimation = this._params.animation.enable;
 
-		this._params.animation.delay = !this.isAnimation ? 0 : this._params.animation.delay;
+		this._params.animation.delay = this.isAnimation ? this._params.animation.delay : 0;
 		this._animation(this._drop, VGDropdown.NAME_KEY, this._params.animation);
 	}
 
@@ -91,25 +86,22 @@ class VGDropdown extends BaseModule {
 	show() {
 		if (isDisabled(this._element) || this._isShown()) return;
 
-		const relatedTarget = {
-			relatedTarget: this._element
-		}
+		const relatedTarget = { relatedTarget: this._element };
 
-		const showEvent = EventHandler.trigger(this._drop, EVENT_KEY_SHOW, relatedTarget)
+		const showEvent = EventHandler.trigger(this._drop, EVENT_KEY_SHOW, relatedTarget);
 		if (showEvent.defaultPrevented) return;
 
 		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.on(element, 'mouseover', noop);
-			}
+			[].concat(...document.body.children).forEach(el => {
+				EventHandler.on(el, 'mouseover', noop);
+			});
 		}
 
-		this._route();
-
-		this._element.setAttribute('aria-expanded', true);
+		this._element.setAttribute('aria-expanded', 'true');
 		this._element.classList.add(CLASS_NAME_SHOW);
 		this._drop.classList.add(CLASS_NAME_SHOW);
 		this._setPlacement();
+		this._route();
 
 		if (this._params.backdrop && !this._params.hover) {
 			Backdrop.show();
@@ -117,36 +109,28 @@ class VGDropdown extends BaseModule {
 
 		if (this._params.overflow) {
 			Overflow.append();
-			document.body.classList.add('dropdown-open')
+			document.body.classList.add('dropdown-open');
 		}
 
-		const completeCallBack = () => {
+		const completeCallback = () => {
 			if (this.isFade) {
 				this._drop.classList.add(CLASS_NAME_FADE);
-			} else if(!this.isAnimation) {
+			} else if (!this.isAnimation) {
 				this._drop.classList.add(CLASS_NAME_OPEN);
 			}
+			EventHandler.trigger(this._drop, EVENT_KEY_SHOWN, relatedTarget);
+		};
 
-			EventHandler.trigger(this._drop, EVENT_KEY_SHOWN, relatedTarget)
-		}
-
-		this._queueCallback(completeCallBack, this._drop, this.isAnimation || this.isFade, 50);
+		this._queueCallback(completeCallback, this._drop, this.isAnimation || this.isFade, 50);
 	}
 
 	hide() {
-		if (isDisabled(this._element) || !this._isShown()) {
-			return;
-		}
-
-		const relatedTarget = {
-			relatedTarget: this._element
-		}
-
-		this._completeHide(relatedTarget);
+		if (isDisabled(this._element) || !this._isShown()) return;
+		this._completeHide({ relatedTarget: this._element });
 	}
 
 	dispose() {
-		return super.dispose();
+		super.dispose();
 	}
 
 	_isShown() {
@@ -154,30 +138,27 @@ class VGDropdown extends BaseModule {
 	}
 
 	_completeHide(relatedTarget) {
-		const hideEvent = EventHandler.trigger(this._drop, EVENT_KEY_HIDE, relatedTarget)
-		if (hideEvent.defaultPrevented) {
-			return;
-		}
+		const hideEvent = EventHandler.trigger(this._drop, EVENT_KEY_HIDE, relatedTarget);
+		if (hideEvent.defaultPrevented) return;
 
 		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
+			[].concat(...document.body.children).forEach(el => {
+				EventHandler.off(el, 'mouseover', noop);
+			});
 		}
 
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-expanded', 'false');
+
 		if (this.isFade) {
 			this._drop.classList.remove(CLASS_NAME_FADE);
-		} else if(!this.isAnimation) {
+		} else if (!this.isAnimation) {
 			this._drop.classList.remove(CLASS_NAME_OPEN);
 		}
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
-		this._element.setAttribute('aria-expanded', 'false');
-
 		if (this._params.backdrop && !this._params.hover) {
-			const _this = this;
-			Backdrop.hide(function () {
-				if (_this._params.overflow) {
+			Backdrop.hide(() => {
+				if (this._params.overflow) {
 					Overflow.destroy();
 				}
 			});
@@ -192,29 +173,40 @@ class VGDropdown extends BaseModule {
 			const completeCallback = () => {
 				this._drop.classList.remove(CLASS_NAME_SHOW);
 				EventHandler.trigger(this._drop, EVENT_KEY_HIDDEN, relatedTarget);
-			}
+			};
 			this._queueCallback(completeCallback, this._drop, this.isAnimation || this.isFade);
 		}, this._params.animation.delay);
 	}
 
-	// TODO class Placement isn't done
 	_setPlacement() {
-		const _this = this;
-
-		if (!_this._isPlacement) {
-			const $placement = new Placement({
-				drop: _this._drop
-			})
+		if (!this._drop) return;
+
+		if (!this._isPlacement) {
+			let placementDefault = 'bottom-start',
+				autoFlip = false,
+				overflowProtection = false;
+
+			if (this._params.placement === 'auto') {
+				autoFlip = true;
+				overflowProtection = true;
+			} else {
+				placementDefault = this._params.placement
+			}
 
-			$placement._setPlacement();
-		}
+			const placement = new Placement({
+				reference: this._element,
+				drop: this._drop,
+				placement: placementDefault,
+				boundary: 'clippingParents',
+				autoFlip: autoFlip,
+				overflowProtection: overflowProtection,
+				fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
+			});
 
-		if (_this._params.offset) {
-			_this._drop.style.paddingTop = _this._params.offset[1] + 'px';
-			_this._drop.style.paddingRight = _this._params.offset[0] + 'px';
+			placement._setPlacement(); // позиционируем
 		}
 
-		_this._isPlacement = true;
+		this._isPlacement = true;
 	}
 
 	static init(element, params = {}) {
@@ -223,109 +215,103 @@ class VGDropdown extends BaseModule {
 		if (instance._params.hover && !instance.isMobileDevice()) {
 			let currentElem = null;
 
-			EventHandler.on(instance._parent, EVENT_MOUSEOVER_DATA_API, function (event) {
+			EventHandler.on(instance._parent, EVENT_MOUSEOVER_DATA_API, (event) => {
 				if (currentElem) return;
+
 				VGDropdown.hideOpenToggles(event);
 
-				let target = event.target.closest('.' + PARENT_CONTAINER);
-				if (!target) return;
+				const target = event.target.closest(`.${PARENT_CONTAINER}`);
+				if (!target || !instance._parent.contains(target)) return;
 
-				if (!instance._parent.contains(target)) return;
 				currentElem = target;
 				instance.show();
 			});
 
-			EventHandler.on(instance._parent, EVENT_MOUSEOUT_DATA_API, function (event) {
+			EventHandler.on(instance._parent, EVENT_MOUSEOUT_DATA_API, (event) => {
 				if (!currentElem) return;
 
 				let relatedTarget = event.relatedTarget;
-
-				while (relatedTarget) {
-					if (relatedTarget === currentElem) return;
+				while (relatedTarget && relatedTarget !== currentElem) {
 					relatedTarget = relatedTarget.parentNode;
 				}
 
+				if (relatedTarget === currentElem) return;
+
 				currentElem = null;
-				instance._completeHide({relatedTarget: instance._element});
-			})
+				instance._completeHide({ relatedTarget: instance._element });
+			});
 		}
 
+		// Клавиатурные события
 		EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_DATA_TOGGLE, VGDropdown.keydownHandler);
-		EventHandler.on(document, EVENT_KEYDOWN_DATA_API, '.' + TARGET_CONTAINER, VGDropdown.keydownHandler);
+		EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `.${TARGET_CONTAINER}`, VGDropdown.keydownHandler);
 		EventHandler.on(document, EVENT_KEYUP_DATA_API, VGDropdown.clearDrops);
 		EventHandler.on(document, EVENT_CLICK_DATA_API, VGDropdown.clearDrops);
-		EventHandler.on(element, EVENT_CLICK_DATA_API, function (event) {
+
+		// Клик по тоглу
+		EventHandler.on(element, EVENT_CLICK_DATA_API, (event) => {
 			event.preventDefault();
 			instance.toggle();
 		});
 	}
 
 	static hideOpenToggles(event) {
-		const openToggles = Selectors.findAll('[data-vg-toggle="dropdown"]:not(.disabled):not(:disabled).show');
+		const openToggles = Selectors.findAll(`${SELECTOR_DATA_TOGGLE}:not(.disabled):not(:disabled).${CLASS_NAME_SHOW}`);
 		for (const toggle of openToggles) {
 			const context = VGDropdown.getInstance(toggle);
-			if (!context) {
-				continue;
-			}
+			if (!context) continue;
 
-			if (event.target.closest('.' + TARGET_CONTAINER) === context._drop) {
+			if (event.target.closest(`.${TARGET_CONTAINER}`) === context._drop) {
 				return;
 			}
 
-			const composedPath = event.composedPath();
+			const composedPath = event.composedPath?.() || [];
 			if (composedPath.includes(context._element)) {
-				continue
+				continue;
 			}
 
-			const relatedTarget = { relatedTarget: context._element }
-
+			const relatedTarget = { relatedTarget: context._element };
 			if (event.type === 'click') {
-				relatedTarget.clickEvent = event
+				relatedTarget.clickEvent = event;
 			}
 
-			context._completeHide(relatedTarget)
+			context._completeHide(relatedTarget);
 		}
 	}
 
 	static keydownHandler(event) {
-		const isInput = /input|textarea/i.test(event.target.tagName)
-		const isEscapeEvent = event.key === 'Escape'
-		const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key)
+		const isInput = /input|textarea/i.test(event.target.tagName);
+		const isEscapeEvent = event.key === 'Escape';
+		const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key);
 
-		if (!isUpOrDownEvent && !isEscapeEvent) {
-			return
-		}
+		if (!isUpOrDownEvent && !isEscapeEvent) return;
+		if (isInput && !isEscapeEvent) return;
 
-		if (isInput && !isEscapeEvent) {
-			return
-		}
+		event.preventDefault();
 
-		event.preventDefault()
+		const toggle = this.matches(SELECTOR_DATA_TOGGLE)
+			? this
+			: Selectors.find(SELECTOR_DATA_TOGGLE, event.delegateTarget?.parentNode);
 
-		const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ?
-			this : (Selectors.find(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode))
+		if (!toggle) return;
 
-		const instance = VGDropdown.getOrCreateInstance(getToggleButton)
+		const instance = VGDropdown.getOrCreateInstance(toggle);
 
 		if (isUpOrDownEvent) {
-			event.stopPropagation()
-			instance.show()
-			return
-		}
-
-		if (instance._isShown()) {
-			event.stopPropagation()
-			instance.hide()
-			getToggleButton.focus()
+			event.stopPropagation();
+			instance.show();
+		} else if (instance._isShown()) {
+			event.stopPropagation();
+			instance.hide();
+			toggle.focus();
 		}
 	}
 
 	static clearDrops(event) {
 		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
-			return
+			return;
 		}
-
-		VGDropdown.hideOpenToggles(event)
+		VGDropdown.hideOpenToggles(event);
 	}
 }