vgapp 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+# VEGAS-APP 0.3.4 (Май, 20, 2025)
+## Новый модуль VGSpy
+
 # VEGAS-APP 0.3.0 (Май, 09, 2025)
 * Исправлены ошибки 
 ## Модуль VGFORMSENDER
@@ -13,7 +16,7 @@
 
 ## Новый модуль VGToast
 
-# VEGAS-APP 0.2.2 - 0.2.3 (Апрель, 4, 2025)
+# VEGAS-APP 0.2.3 (Апрель, 4, 2025)
 ## Модуль VGDROPDOWN
 * Добавлен параметр overflow и backdrop
 
@@ -31,7 +34,7 @@
 * Релиз
 
 
-# VEGAS-APP 0.1.6 - 0.1.7 (Март, 12, 2025)
+# VEGAS-APP 0.1.7 (Март, 12, 2025)
 ## Модуль VGSelect
 * Исправлены ошибки
 
@@ -49,7 +52,7 @@
 * Событие после аякс запроса NAME_KEY.loaded
 
 
-# VEGAS-APP 0.1.3 - 0.1.4 (Март, 10, 2025)
+# VEGAS-APP 0.1.4 (Март, 10, 2025)
 * Перенесен плагин (<a href="https://github.com/vegas-dev/vegas-select">VGSelect</a>) в модуль VGSelect
 * для модулей VGSidebar и VGModal добавлена возможность собирать параметры с кнопки вызова элемента
 * в модуль VGSidebar добавлен класс vg-sidebar-open в тело документа

package/app/modules/vgalert/js/!old/!vgalert.js

@@ -0,0 +1,153 @@
+import BaseModule from "../../base-module";
+import EventHandler from "../../../utils/js/dom/event";
+import {isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
+import Selectors from "../../../utils/js/dom/selectors";
+import VGModal from "../../vgmodal/js/vgmodal";
+
+/**
+ * Constants
+ */
+const NAME = 'alert';
+const NAME_KEY = 'vg.alert';
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="alert"]';
+const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
+
+let IS_PROMISE = false;
+
+class VGAlert extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			modal: {
+				centered: false,
+				backdrop: true,
+				overflow: true,
+				keyboard: true,
+				animation: {
+					enable: false,
+					in: 'animate__rollIn',
+					out: 'animate__rollOut',
+					delay: 0,
+				},
+			},
+			toast: {
+
+			},
+			elements: {
+				button: ''
+			},
+			dialog: 'modal',
+			mode: 'alert',
+		}, params));
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	static run(message, element = null, params = {}, event = null) {
+		if (!element) {
+			let a = document.createElement('a');
+			a.classList.add('btn-alert-fake');
+			document.body.append(a);
+			element = a;
+		}
+
+		const instance = VGAlert.getOrCreateInstance(element, mergeDeepObject({
+			message: message
+		}, params));
+
+		return instance.promise(event);
+	}
+
+	toggle(event) {
+		const promise = this.promise(event);
+		promise.then(resolve => {
+			IS_PROMISE = true;
+			this._element.click();
+		}).catch(reject => {
+
+		});
+	}
+
+	promise(event) {
+		let dialog = this._build();
+		dialog.toggle();
+
+		return new Promise((resolve) => {
+			if (this._params.mode === 'alert') {
+				dialog._element.addEventListener('vg.'+ this._params.dialog +'.hidden', () => {
+					setTimeout(() => {
+						IS_PROMISE = false;
+						let fakeBtn = document.querySelector('.btn-alert-fake');
+						if (fakeBtn) fakeBtn.remove();
+					}, 100)
+				});
+			}
+		});
+	}
+
+	_build() {
+		if (this._params.dialog === 'modal') {
+			return this._buildModal();
+		}
+		if (this._params.dialog === 'toast') {
+			return this._buildToast();
+		}
+	}
+
+	_buildModal() {
+		let id = 'vg-alert-' + makeRandomString(),
+			$modal = Selectors.find('.vg-alert-modal');
+
+		if ($modal) $modal.remove();
+
+		return VGModal.build(id, this._params.modal, (self) => {
+			let element = self._element;
+			element.classList.add('vg-alert-modal');
+
+			let $body = Selectors.find('.vg-modal-body', element);
+			if ($body) {
+				let html = '<div class="message">' + this._params.message + '</div>';
+
+				html += '<div class="buttons">';
+				if (this._params.elements.button) {
+					html += '<a href="#" data-vg-dismiss="modal" class="btn btn-primary">'+ this._params.elements.button +'</a>';
+				}
+				html += '</div>';
+
+				$body.innerHTML = html;
+			}
+		});
+	}
+
+	_buildToast() {
+
+	}
+}
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	if (!IS_PROMISE) {
+		let target = this;
+		event.preventDefault();
+
+		if (isDisabled(target)) return;
+
+		const data = VGAlert.getOrCreateInstance(target)
+		data.toggle(event);
+	}
+});
+
+window.alert = (message) => {
+	VGAlert.run(message);
+}
+
+export default VGAlert;

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

@@ -1,7 +1,8 @@
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
-import {dismissTrigger} from "../../module-fn";
-import {execute, mergeDeepObject} from "../../../utils/js/functions";
+import {isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
+import Selectors from "../../../utils/js/dom/selectors";
+import VGModal from "../../vgmodal/js/vgmodal";
 
 /**
  * Constants
@@ -9,60 +10,36 @@ import {execute, mergeDeepObject} from "../../../utils/js/functions";
 const NAME = 'alert';
 const NAME_KEY = 'vg.alert';
 const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="alert"]';
-
-const CLASS_NAME_SHOW = 'show';
-const CLASS_NAME_OPEN = 'vg-alert-open';
-
-const EVENT_KEY_HIDE    = `${NAME_KEY}.hide`;
-const EVENT_KEY_HIDDEN  = `${NAME_KEY}.hidden`;
-const EVENT_KEY_SHOW    = `${NAME_KEY}.show`;
-const EVENT_KEY_SHOWN   = `${NAME_KEY}.shown`;
-const EVENT_KEY_LOADED  = `${NAME_KEY}.loaded`;
-const EVENT_KEY_CONFIRM = `${NAME_KEY}.confirm`;
-const EVENT_KEY_CANCEL  = `${NAME_KEY}.cancel`;
-
-const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
-const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
 const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
 
+let IS_PROMISE = false;
+
 class VGAlert extends BaseModule {
 	constructor(element, params = {}) {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
-			backdrop: true,
-			overflow: true,
-			keyboard: true,
-			confirm: true,
-			showInside: true,
-			theme: 'default',
-			elements: [
-				{
-					'title': 'Вы уверены?',
-					'element': 'button',
-					'type': 'confirm',
-					'classes': ['btn', 'btn-primary']
-				}
-			],
-			animation: {
-				enable: false,
-				in: 'animate__rollIn',
-				out: 'animate__rollOut',
-				delay: 800,
+			modal: {
+				centered: false,
+				backdrop: true,
+				overflow: true,
+				keyboard: true,
+				animation: {
+					enable: false,
+					in: 'animate__rollIn',
+					out: 'animate__rollOut',
+					delay: 0,
+				},
 			},
-			ajax: {
-				route: '',
-				target: '',
-				method: 'get',
-				loader: false,
-			}
-		}, params));
+			toast: {
 
-		this._addEventListeners();
-		this._dismissElement();
-
-		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
-		this._animation(this._element, VGAlert.NAME_KEY, this._params.animation);
+			},
+			elements: {
+				button: ''
+			},
+			dialog: 'modal',
+			mode: 'alert',
+		}, params));
 	}
 
 	static get NAME() {
@@ -73,57 +50,56 @@ class VGAlert extends BaseModule {
 		return NAME_KEY
 	}
 
-	static run(text, params = {}, callback) {
-		return VGAlert.build(text, params, callback);
-	}
+	static run(... args) {
 
-	static build(text, params, callback) {
-		params = mergeDeepObject({
-			theme: 'default',
-		}, params);
+	}
 
-		let target;
+	toggle(event) {
 
-		let instance =  VGAlert.getOrCreateInstance(target, params);
-		execute(callback, [instance]);
-		instance.show();
 	}
 
-	toggle(relatedTarget) {
-		return !this._isShown() ? this.show(relatedTarget) : this.hide();
-	}
+	promise(event) {
 
-	show(relatedTarget) {
+	}
 
+	_build() {
+		if (this._params.dialog === 'modal') {
+			return this._buildModal();
+		}
+		if (this._params.dialog === 'toast') {
+			return this._buildToast();
+		}
 	}
 
-	hide() {
+	_buildModal() {
+		let id = 'vg-alert-' + makeRandomString(),
+			$modal = Selectors.find('.vg-alert-modal');
 
-	}
+		if ($modal) $modal.remove();
 
-	dispose() {
-		super.dispose();
-	}
+		return VGModal.build(id, this._params.modal, (self) => {
+			let element = self._element;
+			element.classList.add('vg-alert-modal');
 
-	_isShown() {
-		return this._element.classList.contains(CLASS_NAME_SHOW);
-	}
+			let $body = Selectors.find('.vg-modal-body', element);
+			if ($body) {
+				let html = '<div class="message">' + this._params.message + '</div>';
 
-	_addEventListeners() {
-		EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
-			if (event.key !== 'Escape') return;
+				html += '<div class="buttons">';
+				if (this._params.elements.button) {
+					html += '<a href="#" data-vg-dismiss="modal" class="btn btn-primary">'+ this._params.elements.button +'</a>';
+				}
+				html += '</div>';
 
-			if (this._params.keyboard) {
-				this.hide();
-				return;
+				$body.innerHTML = html;
 			}
-
-			EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED)
 		});
 	}
-}
 
-dismissTrigger(VGAlert);
+	_buildToast() {
+
+	}
+}
 
 /**
  * Data API implementation
@@ -132,4 +108,8 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 });
 
-export default VGAlert;
+window.alert = (message) => {
+	VGAlert.run(message);
+}
+
+export default VGAlert;

package/app/modules/vgdatatable/js/vgdatatable.js

@@ -0,0 +1,108 @@
+import BaseModule from "../../base-module";
+import {isObject, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
+import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
+
+const NAME             = 'datatable';
+const NAME_KEY         = 'vg.datatable';
+
+const CLASS_NAME_LOADER       = 'vg-datatable-loader';
+const CLASS_NAME_LOADER_AFTER = 'vg-datatable-loader--after';
+
+const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
+
+class VGDataTable extends BaseModule {
+	constructor(element, params) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			mode: 'table', // варианты: table, list, card
+			paginate: {
+				enabled: true,
+				stack: true,
+				items: 10
+			},
+			loader: true,
+
+			ajax: {
+				enabled: true,
+				route: '',
+				target: '',
+				method: 'get',
+				loader: false,
+			}
+		}, params));
+
+		this.paginateCount = this._params.paginate.items;
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	static init(el, params = {}) {
+		let instance = VGDataTable.getOrCreateInstance(el, params);
+		instance.build();
+	}
+
+	build() {
+		if (this._params.loader) {
+			this._element.classList.add(CLASS_NAME_LOADER_AFTER);
+			this._element.parentElement.style.position = 'relative';
+			this._element.insertAdjacentHTML('beforebegin', '<div class="'+ CLASS_NAME_LOADER +'"><div class="vg-loader"></div></div>')
+		}
+
+		if (this._params.ajax.enabled) {
+			this._route((status, data) => {
+				setTimeout(() => {
+					EventHandler.trigger(this._element, EVENT_KEY_LOADED, {stats: status, data: data});
+
+					if (this._params.loader) {
+						this._element.classList.remove(CLASS_NAME_LOADER_AFTER);
+						Selectors.find('.' + CLASS_NAME_LOADER).remove();
+					}
+
+					this._setBuildMode(normalizeData(data.response));
+				}, 1000);
+			});
+		} else {
+			// TODO берем данные которые уже есть странице и загружены
+		}
+	}
+
+	_setBuildMode(data) {
+		if (!data) return;
+
+		switch (this._params.mode) {
+			case 'table': this._modeBuildTable(data); break;
+			case 'list':  this._modeBuildList(data);  break;
+			case 'card':  this._modeBuildCard(data);  break;
+		}
+	}
+
+	_modeBuildTable(data) {
+		let target = Selectors.find('tbody', this._element);
+
+		if (isObject(data)) {
+			for (const datum of data) {
+				console.log(datum)
+			}
+		} else {
+			target.innerHTML = data;
+		}
+	}
+
+	_modeBuildList(data) {
+
+	}
+
+	_modeBuildCard(data) {
+
+	}
+}
+
+export default VGDataTable;

package/app/modules/vgdatatable/scss/_variables.scss

@@ -0,0 +1,3 @@
+$datatable-map: (
+	loader-bg: rgba(white, .15)
+);

package/app/modules/vgdatatable/scss/vgdatatable.scss

@@ -0,0 +1,47 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGDataTable
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE.md
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-datatable {
+	@include mix-vars('datatable', $datatable-map);
+
+	&-loader {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		min-height: 300px;
+		left: 0;
+		top: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+
+		&--after {
+			position: relative;
+
+			&:after {
+				content: '';
+				width: 100%;
+				height: 100%;
+				min-height: 300px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background-color: var(--vg-datatable-loader-bg);
+				position: absolute;
+				left: 0;
+				top: 0;
+			}
+		}
+	}
+}

package/app/modules/vgformsender/js/hideshowpass.js

@@ -20,9 +20,7 @@ class VGHideShowPass extends BaseModule{
 	constructor(el, params = {}) {
 		super(el, params);
 
-		this._params = this._getParams(el, mergeDeepObject({
-
-		}, params))
+		this._params = this._getParams(el, mergeDeepObject({}, params));
 	}
 
 	static get NAME() {

package/app/modules/vgformsender/js/vgformsender.js

@@ -36,6 +36,12 @@ class VGFormSender extends BaseModule {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
+			response: {
+				enabled: false,
+				errors: false,
+				title: '',
+				message: '',
+			},
 			redirect: {
 				error: '',
 				success: ''
@@ -125,6 +131,10 @@ class VGFormSender extends BaseModule {
 		_this._route(function (status, data) {
 			_this._element.classList.remove('was-validated');
 
+			if (_this._params.response.enabled) {
+				data.response = _this._params.response;
+			}
+
 			if (_this._params.alert.enabled) {
 				if (typeof status === 'string' && status === 'error') {
 					if (_this._params.redirect.error) {

package/app/modules/vgmodal/js/vgmodal.js

@@ -50,6 +50,7 @@ class VGModal extends BaseModule {
 			keyboard: true,
 			fields: [],
 			hash: false,
+			centered: false,
 			ajax: {
 				route: '',
 				target: '',
@@ -60,7 +61,8 @@ class VGModal extends BaseModule {
 				enable: false,
 				in: 'animate__rollIn',
 				out: 'animate__rollOut',
-				delay: 800,
+				delay: 100,
+				duration: 800,
 			},
 			classes: {
 				general: 'vg-modal',
@@ -106,6 +108,10 @@ class VGModal extends BaseModule {
 		_element.id = id;let dialog = document.createElement('div');
 		dialog.classList.add('vg-modal-dialog');
 
+		if ('centered' in params && params.centered) {
+			dialog.classList.add('vg-modal-dialog-centered');
+		}
+
 		let content = document.createElement('div');
 		content.classList.add('vg-modal-content');
 
@@ -130,6 +136,8 @@ class VGModal extends BaseModule {
 		const modal = VGModal.getOrCreateInstance(_element, params);
 
 		execute(callback, [modal]);
+
+		return modal;
 	}
 
 	toggle(relatedTarget) {