vgapp 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# VEGAS-APP 0.2.5 (Апрель, 12, 2025)
+* Исправлены ошибки в разных модулях
+## Новый модуль VGRollup
+
+# VEGAS-APP 0.2.4 (Апрель, 8, 2025)
+## Модуль VGSidebar & VGModal
+* Добавлен параметр hash
+
+## Новый модуль VGToast
+
 # VEGAS-APP 0.2.2 - 0.2.3 (Апрель, 4, 2025)
 ## Модуль VGDROPDOWN
 * Добавлен параметр overflow и backdrop

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

@@ -0,0 +1,135 @@
+import BaseModule from "../../base-module";
+import EventHandler from "../../../utils/js/dom/event";
+import {dismissTrigger} from "../../module-fn";
+import {execute, mergeDeepObject} from "../../../utils/js/functions";
+
+/**
+ * Constants
+ */
+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`;
+
+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,
+			},
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get',
+				loader: false,
+			}
+		}, params));
+
+		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);
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	static run(text, params = {}, callback) {
+		return VGAlert.build(text, params, callback);
+	}
+
+	static build(text, params, callback) {
+		params = mergeDeepObject({
+			theme: 'default',
+		}, params);
+
+		let target;
+
+		let instance =  VGAlert.getOrCreateInstance(target, params);
+		execute(callback, [instance]);
+		instance.show();
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
+
+	show(relatedTarget) {
+
+	}
+
+	hide() {
+
+	}
+
+	dispose() {
+		super.dispose();
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}
+
+	_addEventListeners() {
+		EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
+			if (event.key !== 'Escape') return;
+
+			if (this._params.keyboard) {
+				this.hide();
+				return;
+			}
+
+			EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED)
+		});
+	}
+}
+
+dismissTrigger(VGAlert);
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+
+});
+
+export default VGAlert;

package/app/modules/vgalert/scss/_variables.scss

@@ -0,0 +1,32 @@
+$alert-map: (
+		padding: 2rem,
+		margin: 0 0 2rem,
+		border-width: $border-width,
+		border-style: $border-style,
+		border-color: transparent,
+		border-radius: $border-radius,
+		gap: 1.5rem,
+		icon-width: 80px,
+		icon-height: 80px,
+		content-width: 100%,
+		content-align: center,
+		content-justify: flex-start
+);
+$alert-success-map: (
+		color: darken(#A5DC86, 10%),
+		border-color: #A5DC86,
+		background-color: rgba(lighten(#A5DC86, 10%), .15),
+		stroke: rgba(117, 183, 152, 0.4)
+);
+
+$alert-error-map: (
+		color: darken(#F74444, 10%),
+		border-color: #F74444,
+		background-color: rgba(lighten(#F74444, 25%), .075)
+);
+
+$alert-waiting-map: (
+		color: darken(#ffda6a, 10%),
+		border-color: #ffda6a,
+		background-color: rgba(lighten(#ffda6a, 15%), .1)
+);

package/app/modules/vgalert/scss/vgalert.css

@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGAlert
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-alert {
+  --vg-alert-padding: 2rem ;
+  --vg-alert-margin: 0 0 2rem ;
+  --vg-alert-border-width: 1px ;
+  --vg-alert-border-style: solid ;
+  --vg-alert-border-color: transparent ;
+  --vg-alert-border-radius: 0.375rem ;
+  --vg-alert-gap: 1.5rem ;
+  --vg-alert-icon-width: 80px ;
+  --vg-alert-icon-height: 80px ;
+  --vg-alert-content-width: 100% ;
+  --vg-alert-content-align: center ;
+  --vg-alert-content-justify: flex-start ;
+  --vg-alert-success-color: #88d15e ;
+  --vg-alert-success-border-color: #A5DC86 ;
+  --vg-alert-success-background-color: rgba(194, 231, 174, 0.15) ;
+  --vg-alert-success-stroke: rgba(117, 183, 152, 0.4) ;
+  --vg-alert-error-color: #f51313 ;
+  --vg-alert-error-border-color: #F74444 ;
+  --vg-alert-error-background-color: rgba(252, 190, 190, 0.075) ;
+  --vg-alert-waiting-color: #ffcd37 ;
+  --vg-alert-waiting-border-color: #ffda6a ;
+  --vg-alert-waiting-background-color: rgba(255, 237, 183, 0.1) ;
+  padding: var(--vg-alert-padding);
+  margin: var(--vg-alert-margin);
+  border: var(--vg-alert-border-width) var(--vg-alert-border-style) var(--vg-alert-border-color);
+  border-radius: var(--vg-alert-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vg-alert-success {
+  color: var(--vg-alert-success-color);
+  border-color: var(--vg-alert-success-border-color);
+  background-color: var(--vg-alert-success-background-color);
+}
+.vg-alert-error {
+  color: var(--vg-alert-error-color);
+  border-color: var(--vg-alert-error-border-color);
+  background-color: var(--vg-alert-error-background-color);
+}
+.vg-alert-content {
+  display: flex;
+  align-items: var(--vg-alert-content-align);
+  justify-content: var(--vg-alert-content-justify);
+  gap: var(--vg-alert-gap);
+  width: var(--vg-alert-content-width);
+}
+.vg-alert-content--icon {
+  width: var(--vg-alert-icon-width);
+  height: var(--vg-alert-icon-height);
+}
+.vg-alert-content--icon svg {
+  width: 100%;
+  height: 100%;
+}
+.vg-alert-content--icon .ui-success-circle {
+  stroke: var(--vg-alert-success-stroke);
+}
+.vg-alert-content--icon .ui-success-path {
+  stroke: var(--vg-alert-success-color);
+}
+.vg-alert-modal {
+  --vg-alert-icon-width: 150px;
+  --vg-alert-icon-height: 150px;
+  --vg-alert-padding: 5rem 2rem;
+  --vg-alert-border-width: 0;
+  margin: 0;
+}
+.vg-alert-modal .vg-alert-content {
+  flex-direction: column;
+  text-align: center;
+}
+
+/*# sourceMappingURL=vgalert.css.map */

package/app/modules/vgalert/scss/vgalert.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vgalert.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECNG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EDWF;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;;AAIA;EACC;;AAGD;EACC;;AAMJ;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA","file":"vgalert.css"}

package/app/modules/vgalert/scss/vgalert.scss

@@ -0,0 +1,79 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGAlert
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-alert {
+	@include mix-vars('alert', $alert-map);
+	@include mix-vars('alert-success', $alert-success-map);
+	@include mix-vars('alert-error', $alert-error-map);
+	@include mix-vars('alert-waiting', $alert-waiting-map);
+	padding: var(--vg-alert-padding);
+	margin: var(--vg-alert-margin);
+	border: var(--vg-alert-border-width) var(--vg-alert-border-style) var(--vg-alert-border-color);
+	border-radius: var(--vg-alert-border-radius);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&-success {
+		color: var(--vg-alert-success-color);
+		border-color: var(--vg-alert-success-border-color);
+		background-color: var(--vg-alert-success-background-color);
+	}
+
+	&-error {
+		color: var(--vg-alert-error-color);
+		border-color: var(--vg-alert-error-border-color);
+		background-color: var(--vg-alert-error-background-color);
+	}
+
+	&-content {
+		display: flex;
+		align-items: var(--vg-alert-content-align);
+		justify-content: var(--vg-alert-content-justify);
+		gap: var(--vg-alert-gap);
+		width: var(--vg-alert-content-width);
+
+		&--icon {
+			width: var(--vg-alert-icon-width);
+			height: var(--vg-alert-icon-height);
+
+			svg {
+				width: 100%;
+				height: 100%;
+			}
+
+			.ui-success {
+				&-circle {
+					stroke: var(--vg-alert-success-stroke);
+				}
+
+				&-path {
+					stroke: var(--vg-alert-success-color);
+				}
+			}
+		}
+	}
+
+	&-modal {
+		--vg-alert-icon-width: 150px;
+		--vg-alert-icon-height: 150px;
+		--vg-alert-padding: 5rem 2rem;
+		--vg-alert-border-width: 0;
+		margin: 0;
+
+		.vg-alert-content {
+			flex-direction: column;
+			text-align: center;
+		}
+	}
+}

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

@@ -40,7 +40,8 @@ class VGDropdown extends BaseModule {
 			ajax: {
 				route: '',
 				target: '',
-				method: 'get'
+				method: 'get',
+				loader: false,
 			},
 			animation: {
 				enable: false,

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

@@ -6,7 +6,6 @@ import EventHandler from "../../../utils/js/dom/event";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import {execute, isDisabled, isRTL, mergeDeepObject, reflow} from "../../../utils/js/functions";
 import {dismissTrigger} from "../../module-fn";
-import Params from "../../../utils/js/components/params";
 
 /**
  * Constants
@@ -36,8 +35,10 @@ const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
 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`;
-const EVENT_KEY_MOUSEDOWN_DISMISS   = `mousedown.dismiss${NAME_KEY}`
-const EVENT_KEY_CLICK_DISMISS           = `click.dismiss${NAME_KEY}`
+const EVENT_KEY_MOUSEDOWN_DISMISS   = `mousedown.dismiss${NAME_KEY}`;
+const EVENT_KEY_CLICK_DISMISS       = `click.dismiss${NAME_KEY}`;
+const EVENT_KEY_DOM_LOADED_DATA_API = `DOMContentLoaded.${NAME_KEY}.data.api`;
+const EVENT_KEY_POPSTATE_DATA_API   = `popstate.${NAME_KEY}.data.api`;
 
 class VGModal extends BaseModule {
 	constructor(element, params = {}) {
@@ -48,6 +49,7 @@ class VGModal extends BaseModule {
 			focus: true,
 			keyboard: true,
 			fields: [],
+			hash: false,
 			ajax: {
 				route: '',
 				target: '',
@@ -149,6 +151,14 @@ class VGModal extends BaseModule {
 		this._isShown = true;
 		this._isTransitioning = true;
 
+		if (this._params.hash) {
+			window.history.pushState(null, "vg-sidebar-open", "#" + this._element.id);
+
+			EventHandler.on(window, EVENT_KEY_POPSTATE_DATA_API, () => {
+				this.hide();
+			});
+		}
+
 		this._scrollBar.hide();
 
 		document.body.classList.add(CLASS_NAME_OPEN);
@@ -183,6 +193,10 @@ class VGModal extends BaseModule {
 
 		if (openedModals.length) return;
 
+		if (this._params.hash) {
+			history.pushState("", document.title, window.location.pathname + window.location.search);
+		}
+
 		Backdrop.hide(() => {
 			document.body.classList.remove(CLASS_NAME_OPEN);
 			this._resetAdjustments();
@@ -327,7 +341,6 @@ dismissTrigger(VGModal);
 /**
  * Data API implementation
  */
-
 EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 	const target = Selectors.getElementFromSelector(this);
 
@@ -342,6 +355,21 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 	const data = VGModal.getOrCreateInstance(target);
 	data.toggle(this);
+});
+
+EventHandler.on(document, EVENT_KEY_DOM_LOADED_DATA_API, function () {
+	let targetHash = window.location.hash.slice(1);
+	if (targetHash) {
+		let target = Selectors.find('#' + targetHash);
+		if (target && target.classList.contains('vg-modal')) {
+			if (isDisabled(target)) {
+				return;
+			}
+
+			const data = VGModal.getOrCreateInstance(target)
+			data.toggle();
+		}
+	}
 })
 
 export default VGModal;