vgapp 0.2.8 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# VEGAS-APP 0.3.0 (Май, 09, 2025)
+* Исправлены ошибки 
+## Модуль VGFORMSENDER
+* Добавлен параметр pass, будет добавлен глаз к полю с паролем
+
 # VEGAS-APP 0.2.5 (Апрель, 12, 2025)
 * Исправлены ошибки в разных модулях
 ## Новый модуль VGRollup

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

@@ -0,0 +1,97 @@
+import BaseModule from "../../base-module";
+import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
+import {isDisabled, mergeDeepObject} from "../../../utils/js/functions";
+import Templater from "../../../utils/js/components/templater";
+import {Manipulator} from "../../../utils/js/dom/manipulator";
+
+/**
+ * Constants
+ */
+const NAME = 'hideshowpass';
+const NAME_KEY = 'vg.hideshowpass';
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="vgpass"]';
+
+const CLASS_NAME_SHOW = 'show';
+
+const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
+
+class VGHideShowPass extends BaseModule{
+	constructor(el, params = {}) {
+		super(el, params);
+
+		this._params = this._getParams(el, mergeDeepObject({
+
+		}, params))
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide(relatedTarget);
+	}
+
+	show(relatedTarget) {
+		if (relatedTarget) this._params = this._getParams(relatedTarget, this._params);
+
+		this._element.classList.add(CLASS_NAME_SHOW);
+		relatedTarget.remove();
+		this.build(true);
+		Manipulator.set(this._element, 'type', 'text');
+	}
+
+	hide(relatedTarget) {
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		relatedTarget.remove();
+		this.build(false);
+		Manipulator.set(this._element, 'type', 'password');
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}
+
+	static init(el, params) {
+		let instance = VGHideShowPass.getOrCreateInstance(el, params);
+		instance.build(false);
+	}
+
+	build(isShow = false) {
+		if (!isShow) {
+			this._params.template = 'pass-close';
+		} else {
+			this._params.template = 'pass-open';
+		}
+
+		new Templater(this._element, this._params).render();
+	}
+}
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	const target = Selectors.prev(this);
+	if (!target) return;
+
+	if (['A', 'AREA'].includes(this.tagName)) {
+		event.preventDefault()
+	}
+
+	if (isDisabled(this)) {
+		return
+	}
+
+	this.setAttribute('aria-expanded', true);
+
+	const instance = VGHideShowPass.getOrCreateInstance(target)
+	instance.toggle(this);
+});
+
+export default VGHideShowPass

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

@@ -2,11 +2,11 @@ import BaseModule from "../../base-module";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
 import VGModal from "../../vgmodal/js/vgmodal";
-import {isObject, makeRandomString, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
+import {execute, isObject, makeRandomString, mergeDeepObject, noop, normalizeData} from "../../../utils/js/functions";
 import Selectors from "../../../utils/js/dom/selectors";
 import VGCollapse from "../../vgcollapse/js/vgcollapse";
 import {getSVG} from "../../module-fn";
-import Backdrop from "../../../utils/js/components/backdrop";
+import VGHideShowPass from "./hideshowpass";
 
 /**
  * Constants
@@ -33,6 +33,12 @@ class VGFormSender extends BaseModule {
 			submit: false,
 			fields: [],
 			timeout: 50,
+			pass: {
+				enabled: true,
+				template: 'pass-open',
+				classes: ['vg-form-sender--hide-show-pass'],
+				insert: 'afterend'
+			},
 			alert: {
 				enabled: true,
 				type: 'modal'
@@ -47,7 +53,11 @@ class VGFormSender extends BaseModule {
 				alertCollapse: 'vg-form-sender-collapse',
 				alertModal: 'vg-form-sender-modal',
 				validation: 'needs-validation',
-				wasValidate: 'was-validated'
+				wasValidate: 'was-validated',
+				content: 'vg-form-sender--content'
+			},
+			callback: {
+				afterInit: noop
 			}
 		}, params));
 
@@ -71,12 +81,22 @@ class VGFormSender extends BaseModule {
 	build() {
 		this._element.classList.add(this._params.classes.general);
 
+		[... Selectors.findAll('input, textarea, select', this._element)].forEach((el) => {
+			el.parentElement.classList.add(this._params.classes.content)
+		});
+
 		if (this._params.validate) {
 			Manipulator.set(this._element, 'novalidate', '');
 			this._element.classList.add(this._params.classes.validation);
 		}
 
-		// TODO сделать добавление глаза если есть ввод пароля
+		if (this._params.pass.enabled) {
+			[... Selectors.findAll('input[type="password"]', this._element)].forEach((el) => {
+				VGHideShowPass.init(el, this._params.pass);
+			})
+		}
+
+		execute(this._params.callback.afterInit, [this._element, this]);
 
 		return this
 	}

package/app/modules/vgformsender/scss/_variables.scss

@@ -0,0 +1,3 @@
+$form-sender-map: (
+		'eye-color': $color
+);

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

@@ -9,11 +9,33 @@
 @import "../../../utils/scss/functions";
 @import "../../../utils/scss/mixin";
 @import "../../../utils/scss/variables";
+@import "variables";
 
 .vg-form-sender {
+	@include mix-vars('form-sender', $form-sender-map);
+
 	&-modal {
 		.vg-modal-content {
 			padding: 0;
 		}
 	}
+
+	&--content {
+		position: relative;
+	}
+
+	&--hide-show-pass {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+		width: 22px;
+		height: 22px;
+		cursor: pointer;
+
+		svg {
+			path {
+				fill: var(--vg-form-sender-eye-color);
+			}
+		}
+	}
 }

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

@@ -0,0 +1,58 @@
+import {execute, mergeDeepObject} from "../functions";
+
+const TEMPLATES = [
+	{type: 'collapse', template: ''},
+	{type: 'modal', template: '<div class="vg-modal"></div>'},
+	{type: 'pass-open', template: '<span data-vg-toggle="vgpass" class="[[classes]]" title="Показать / Скрыть" data-bs-toggle="tooltip"><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></span>'},
+	{type: 'pass-close', template: '<span data-vg-toggle="vgpass" class="[[classes]]" title="Показать / Скрыть" data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><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></span>'},
+]
+
+
+class Templater {
+	constructor(el, params = {}) {
+		if (!el) {
+			throw new Error('Element is required');
+		}
+
+		this._element = el;
+		this._params = mergeDeepObject({
+			insert: 'afterend',
+			classes: []
+		}, params);
+
+		this.templateBuild = null;
+	}
+
+	render(content, callback) {
+		let tmpl = this.toHTML(content, callback);
+
+		switch (this._params.insert) {
+			case 'afterend':
+				this._element.insertAdjacentHTML('afterend', tmpl);
+			break;
+		}
+	}
+
+	toHTML(content = '' | null, callback) {
+		let tmpl = '';
+
+		for (const tmplElement of TEMPLATES) {
+			if (tmplElement.type === this._params.template) {
+				tmpl = tmplElement.template;
+			}
+		}
+
+		if (!tmpl) return;
+
+		tmpl = tmpl.replace('[[classes]]', this._params.classes.join(' '));
+		execute(callback, [this._element, this._params, tmpl]);
+
+		return tmpl;
+	}
+
+	setContent() {
+
+	}
+}
+
+export default Templater;

package/app/utils/js/dom/selectors.js

@@ -59,6 +59,10 @@ const Selectors = {
 	getMultipleElementsFromSelector(element) {
 		const selector = getSelector(element);
 		return selector ? Selectors.findAll(selector) : []
+	},
+
+	prev(element) {
+		return element.previousElementSibling || null
 	}
 }