vgapp 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,4 +1,10 @@
-# VEGAS-APP 0.2.2 (Апрель, 4, 2025)
+# VEGAS-APP 0.2.4 (Апрель, 4, 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,119 @@
+import BaseModule from "../../base-module";
+import EventHandler from "../../../utils/js/dom/event";
+import {dismissTrigger} from "../../module-fn";
+import {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,
+			elements: [
+				{
+					'title': 'Вы уверены?',
+					'element': 'button',
+					'type': 'confirm',
+					'classes': ['btn', 'btn-primary']
+				}
+			],
+			template: '',
+			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
+	}
+
+	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

@@ -31,17 +31,17 @@ class VGDropdown extends BaseModule {
 
 		let defaultParams = {
 			offset: [0, 2],
-			over: false,
-			backdrop: true,
-			overflow: true,
-			keyboard: true,
+			backdrop: false,
+			overflow: false,
+			keyboard: false,
 			placement: 'bottom',
 			timeoutAnimation: 350,
 			hover: false,
 			ajax: {
 				route: '',
 				target: '',
-				method: 'get'
+				method: 'get',
+				loader: false,
 			},
 			animation: {
 				enable: false,
@@ -102,7 +102,7 @@ class VGDropdown extends BaseModule {
 		this._drop.classList.add(CLASS_NAME_SHOW);
 		this._setPlacement();
 
-		if (this._params.backdrop) {
+		if (this._params.backdrop && !this._params.hover) {
 			Backdrop.show();
 		}
 
@@ -154,9 +154,10 @@ class VGDropdown extends BaseModule {
 		this._element.classList.remove(CLASS_NAME_SHOW);
 		this._element.setAttribute('aria-expanded', 'false');
 
-		if (this._params.backdrop) {
+		if (this._params.backdrop && !this._params.hover) {
+			const _this = this;
 			Backdrop.hide(function () {
-				if (this._params.overflow) {
+				if (_this._params.overflow) {
 					Overflow.destroy();
 				}
 			});

package/app/modules/vgdropdown/scss/vgdropdown.css

@@ -1,47 +1,47 @@
-@charset "UTF-8";
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGDropdown
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-.vg-dropdown {
-  position: relative;
-  --vg-dropdown-bg-color: #fff ;
-  --vg-dropdown-color: #000000 ;
-  --vg-dropdown-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
-  --vg-dropdown-border-width: 1px ;
-  --vg-dropdown-border-style: solid ;
-  --vg-dropdown-border-color: rgba(0, 0, 0, 0.2) ;
-  --vg-dropdown-border-radius: 0.375rem ;
-  --vg-dropdown-z-index: 1010 ;
-  --vg-dropdown-transition: all 0.5s ease-in-out ;
-  --vg-dropdown-min-width: 225px ;
-}
-.vg-dropdown-content {
-  z-index: var(--vg-dropdown-z-index);
-  position: absolute;
-  opacity: 0;
-  transform: translateY(20%);
-  transition: var(--vg-dropdown-transition);
-  min-width: var(--vg-dropdown-min-width);
-}
-.vg-dropdown-content:not(.show) {
-  display: none;
-}
-.vg-dropdown-content.fade {
-  opacity: 1;
-  transform: translateY(0);
-}
-.vg-dropdown-container {
-  background-color: var(--vg-dropdown-bg-color);
-  color: var(--vg-dropdown-color);
-  border-width: var(--vg-dropdown-border-width);
-  border-style: var(--vg-dropdown-border-style);
-  border-color: var(--vg-dropdown-border-color);
-  border-radius: var(--vg-dropdown-border-radius);
-  box-shadow: var(--vg-dropdown-box-shadow);
-}
-
-/*# sourceMappingURL=vgdropdown.css.map */
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGDropdown
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-dropdown {
+  position: relative;
+  --vg-dropdown-bg-color: #fff ;
+  --vg-dropdown-color: #000000 ;
+  --vg-dropdown-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-dropdown-border-width: 1px ;
+  --vg-dropdown-border-style: solid ;
+  --vg-dropdown-border-color: rgba(0, 0, 0, 0.2) ;
+  --vg-dropdown-border-radius: 0.375rem ;
+  --vg-dropdown-z-index: 1010 ;
+  --vg-dropdown-transition: all 0.5s ease-in-out ;
+  --vg-dropdown-min-width: 225px ;
+}
+.vg-dropdown-content {
+  z-index: var(--vg-dropdown-z-index);
+  position: absolute;
+  opacity: 0;
+  transform: translateY(20%);
+  transition: var(--vg-dropdown-transition);
+  min-width: var(--vg-dropdown-min-width);
+}
+.vg-dropdown-content:not(.show) {
+  display: none;
+}
+.vg-dropdown-content.fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+.vg-dropdown-container {
+  background-color: var(--vg-dropdown-bg-color);
+  color: var(--vg-dropdown-color);
+  border-width: var(--vg-dropdown-border-width);
+  border-style: var(--vg-dropdown-border-style);
+  border-color: var(--vg-dropdown-border-color);
+  border-radius: var(--vg-dropdown-border-radius);
+  box-shadow: var(--vg-dropdown-box-shadow);
+}
+
+/*# sourceMappingURL=vgdropdown.css.map */

package/app/modules/vgformsender/scss/vgformsender.css

@@ -1,13 +1,13 @@
-@charset "UTF-8";
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGFormSender
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-.vg-form-sender-modal .vg-modal-content {
-  padding: 0;
-}
-
-/*# sourceMappingURL=vgformsender.css.map */
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGFormSender
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-form-sender-modal .vg-modal-content {
+  padding: 0;
+}
+
+/*# sourceMappingURL=vgformsender.css.map */

package/app/modules/vglawcookie/scss/vglawcookie.css

@@ -1,87 +1,87 @@
-@charset "UTF-8";
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGLawCookie
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-.vg-lawcookie {
-  --vg-lawcookie-background-color: #fff ;
-  --vg-lawcookie-color: #000000 ;
-  --vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
-  --vg-lawcookie-padding: 1rem ;
-  --vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;
-  --vg-lawcookie-border-radius: 0.375rem ;
-  --vg-lawcookie-z-index: 2000 ;
-  --vg-lawcookie-transition: all 0.5s ease-in-out ;
-  --vg-lawcookie-max-width: 50% ;
-  --vg-lawcookie-padding-outer: 1rem ;
-  --vg-lawcookie-font-size: 14px ;
-  --vg-lawcookie-title-font-size: 16px ;
-  position: fixed;
-  display: none;
-  padding: var(--vg-lawcookie-padding-outer);
-  z-index: var(--vg-lawcookie-z-index);
-  max-width: var(--vg-lawcookie-max-width);
-}
-@media screen and (max-width: 600px) {
-  .vg-lawcookie {
-    width: 100%;
-    --vg-lawcookie-max-width: 100%;
-  }
-}
-.vg-lawcookie.show {
-  display: block;
-}
-.vg-lawcookie.left {
-  left: 0;
-}
-.vg-lawcookie.right {
-  right: 0;
-}
-.vg-lawcookie.top {
-  top: 0;
-}
-.vg-lawcookie.bottom {
-  bottom: 0;
-}
-.vg-lawcookie.center {
-  top: 50%;
-  left: 50%;
-}
-.vg-lawcookie.center.left {
-  left: 0;
-}
-.vg-lawcookie.center.top {
-  top: 0;
-  left: 50%;
-}
-.vg-lawcookie.center.bottom {
-  top: auto;
-  bottom: 0;
-}
-.vg-lawcookie.center.right {
-  right: 0;
-  left: auto;
-}
-.vg-lawcookie.fullwidth {
-  max-width: 100%;
-  width: 100%;
-  --vg-lawcookie-padding-outer: 0;
-  --vg-lawcookie-border-radius: 0;
-  --vg-lawcookie-box-shadow: none;
-}
-.vg-lawcookie--content {
-  background-color: var(--vg-lawcookie-background-color);
-  border-radius: var(--vg-lawcookie-border-radius);
-  padding: var(--vg-lawcookie-padding);
-  color: var(--vg-lawcookie-color);
-  box-shadow: var(--vg-lawcookie-box-shadow);
-  font-size: var(--vg-lawcookie-font-size);
-}
-.vg-lawcookie--content .title {
-  font-size: var(--vg-lawcookie-title-font-size);
-}
-
-/*# sourceMappingURL=vglawcookie.css.map */
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGLawCookie
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-lawcookie {
+  --vg-lawcookie-background-color: #fff ;
+  --vg-lawcookie-color: #000000 ;
+  --vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-lawcookie-padding: 1rem ;
+  --vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;
+  --vg-lawcookie-border-radius: 0.375rem ;
+  --vg-lawcookie-z-index: 2000 ;
+  --vg-lawcookie-transition: all 0.5s ease-in-out ;
+  --vg-lawcookie-max-width: 50% ;
+  --vg-lawcookie-padding-outer: 1rem ;
+  --vg-lawcookie-font-size: 14px ;
+  --vg-lawcookie-title-font-size: 16px ;
+  position: fixed;
+  display: none;
+  padding: var(--vg-lawcookie-padding-outer);
+  z-index: var(--vg-lawcookie-z-index);
+  max-width: var(--vg-lawcookie-max-width);
+}
+@media screen and (max-width: 600px) {
+  .vg-lawcookie {
+    width: 100%;
+    --vg-lawcookie-max-width: 100%;
+  }
+}
+.vg-lawcookie.show {
+  display: block;
+}
+.vg-lawcookie.left {
+  left: 0;
+}
+.vg-lawcookie.right {
+  right: 0;
+}
+.vg-lawcookie.top {
+  top: 0;
+}
+.vg-lawcookie.bottom {
+  bottom: 0;
+}
+.vg-lawcookie.center {
+  top: 50%;
+  left: 50%;
+}
+.vg-lawcookie.center.left {
+  left: 0;
+}
+.vg-lawcookie.center.top {
+  top: 0;
+  left: 50%;
+}
+.vg-lawcookie.center.bottom {
+  top: auto;
+  bottom: 0;
+}
+.vg-lawcookie.center.right {
+  right: 0;
+  left: auto;
+}
+.vg-lawcookie.fullwidth {
+  max-width: 100%;
+  width: 100%;
+  --vg-lawcookie-padding-outer: 0;
+  --vg-lawcookie-border-radius: 0;
+  --vg-lawcookie-box-shadow: none;
+}
+.vg-lawcookie--content {
+  background-color: var(--vg-lawcookie-background-color);
+  border-radius: var(--vg-lawcookie-border-radius);
+  padding: var(--vg-lawcookie-padding);
+  color: var(--vg-lawcookie-color);
+  box-shadow: var(--vg-lawcookie-box-shadow);
+  font-size: var(--vg-lawcookie-font-size);
+}
+.vg-lawcookie--content .title {
+  font-size: var(--vg-lawcookie-title-font-size);
+}
+
+/*# sourceMappingURL=vglawcookie.css.map */