vgapp 0.7.6 → 0.7.8

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

@@ -1,55 +1,387 @@
-import {execute, mergeDeepObject} from "../functions";
+import {getSVG} from "../../../modules/module-fn";
 
-const TEMPLATES = [
-	{type: 'pass-open', template: '<span data-vg-toggle="pass" 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="pass" 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>'},
-	{type: 'loader', template: '<div class="vg-loader"></div>'}
-]
+class LaravelHtmlBuilder {
+	constructor(mode = 'string') {
+		this.mode = mode; // 'string' или 'dom'
+		this.document = typeof document !== 'undefined' ? document : null;
+		this.tags = {
+			selfClosing: ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'command', 'embed', 'keygen', 'param', 'source', 'track', 'wbr']
+		};
+	}
 
+	/**
+	 * Установка режима работы
+	 */
+	setMode(mode) {
+		this.mode = mode;
+		return this;
+	}
 
-class Templater {
-	constructor(el, params = {}) {
-		if (!el) {
-			throw new Error('Element is required');
+	/**
+	 * Создание HTML элемента
+	 */
+	element(tag, attributes = {}, content = null, option = {}) {
+		if (this.mode === 'dom' && this.document) {
+			return this._createDomElement(tag, attributes, content, option);
 		}
-
-		this._element = el;
-		this._params = mergeDeepObject({
-			insert: 'afterend',
-			classes: []
-		}, params);
+		return this._createHtmlString(tag, attributes, content, option);
 	}
 
-	render(content, callback) {
-		let tmpl = this.toHTML(content, callback);
+	/**
+	 * Создание DOM элемента
+	 */
+	_createDomElement(tag, attributes, content, option = {}) {
+		const element = this.document.createElement(tag);
 
-		switch (this._params.insert) {
-			case 'afterend':
-				this._element.insertAdjacentHTML('afterend', tmpl);
-			break;
+		// Установка атрибутов
+		this._setDomAttributes(element, attributes);
+
+		// Добавление содержимого
+		if (content !== null && !this.tags.selfClosing.includes(tag)) {
+			if (Array.isArray(content)) {
+				content.forEach(item => {
+					if (typeof item === 'string') {
+						element.appendChild(this.document.createTextNode(item));
+					} else if (item instanceof Node) {
+						element.appendChild(item);
+					}
+				});
+			} else if (content instanceof Node) {
+				element.appendChild(content);
+			} else {
+				if ('isHTML' in option && option.isHTML) {
+					element.innerHTML = content;
+				} else {
+					element.textContent = content;
+				}
+			}
 		}
+
+		return element;
 	}
 
-	toHTML(content = '' | null, callback) {
-		let tmpl = '';
+	/**
+	 * Установка атрибутов DOM элемента
+	 */
+	_setDomAttributes(element, attributes) {
+		if (!attributes) return;
 
-		for (const tmplElement of TEMPLATES) {
-			if (tmplElement.type === this._params.template) {
-				tmpl = tmplElement.template;
+		Object.entries(attributes).forEach(([key, value]) => {
+			if (value === null || value === undefined || value === false) {
+				return;
 			}
+
+			if (value === true) {
+				element.setAttribute(key, '');
+			} else {
+				element.setAttribute(key, String(value));
+			}
+		});
+	}
+
+	/**
+	 * Создание HTML строки
+	 */
+	_createHtmlString(tag, attributes, content, isHTML = false) {
+		const attrString = this._attributesToString(attributes);
+		const isSelfClosing = this.tags.selfClosing.includes(tag);
+
+		if (isSelfClosing) {
+			return `<${tag}${attrString}>`;
 		}
 
-		if (!tmpl) return;
+		const contentStr = content !== null ?
+			this._contentToString(content) : '';
 
-		tmpl = tmpl.replace('[[classes]]', this._params.classes.join(' '));
-		execute(callback, [this._element, this._params, tmpl]);
+		if (tag === '') {
+			return `${contentStr}`;
+		} else {
+			return `<${tag}${attrString}>${contentStr}</${tag}>`;
+		}
+	}
+
+	/**
+	 * Преобразование содержимого в строку
+	 */
+	_contentToString(content) {
+		if (Array.isArray(content)) {
+			return content.map(item => {
+				if (item instanceof Node) {
+					return this._nodeToString(item);
+				}
+				return String(item);
+			}).join('');
+		}
+
+		if (content instanceof Node) {
+			return this._nodeToString(content);
+		}
 
-		return tmpl;
+		return String(content);
 	}
 
-	setContent() {
+	/**
+	 * Преобразование DOM узла в строку
+	 */
+	_nodeToString(node) {
+		if (node.outerHTML) {
+			return node.outerHTML;
+		}
+		return String(node);
+	}
+
+	/**
+	 * Преобразование атрибутов в строку
+	 */
+	_attributesToString(attrs) {
+		if (!attrs || Object.keys(attrs).length === 0) {
+			return '';
+		}
+
+		const attributes = Object.entries(attrs)
+			.map(([key, value]) => {
+				if (value === null || value === undefined || value === false) {
+					return '';
+				}
+
+				if (value === true) {
+					return key;
+				}
+
+				const escapedValue = String(value)
+					.replace(/&/g, '&amp;')
+					.replace(/"/g, '&quot;')
+					.replace(/</g, '&lt;')
+					.replace(/>/g, '&gt;');
+
+				return `${key}="${escapedValue}"`;
+			})
+			.filter(attr => attr !== '');
+
+		return attributes.length ? ' ' + attributes.join(' ') : '';
+	}
+
+	/**
+	 * Методы для конкретных элементов
+	 */
+	div(attributes = {}, content = '', options = {}) {
+		return this.element('div', attributes, content, options);
+	}
+
+	span(attributes = {}, content = '', options = {}) {
+		return this.element('span', attributes, content, options);
+	}
+
+	i(attributes = {}, content = '', options = {}) {
+		return this.element('i', attributes, content, options);
+	}
+
+	p(attributes = {}, content = '', options = {}) {
+		return this.element('p', attributes, content, options);
+	}
+
+	a(href, content = '', attributes = {}, options = {}) {
+		return this.element('a', { href, ...attributes }, content, options);
+	}
+
+	img(src, alt = '', attributes = {}) {
+		return this.element('img', { src, alt, ...attributes });
+	}
+
+	input(name, type = 'text', value = '', attributes = {}) {
+		return this.element('input', {
+			type,
+			name,
+			value,
+			...attributes
+		});
+	}
+
+	button(content = '', type = 'button', attributes = {}, options = {}) {
+		return this.element('button', { type, ...attributes }, content, options);
+	}
 
+	form(action = '', method = 'post', attributes = {}, content = '', options = {}) {
+		return this.element('form', { action, method, ...attributes }, content, options);
 	}
+
+	label(forId, content, attributes = {}, options = {}) {
+		return this.element('label', { for: forId, ...attributes }, content, options);
+	}
+
+	textarea(name, content = '', attributes = {}) {
+		return this.element('textarea', { name, ...attributes }, content);
+	}
+
+	ul(items = [], attributes = {}) {
+		const listItems = items.map(item =>
+			this.element('li', {}, item)
+		);
+		return this.element('ul', attributes, listItems);
+	}
+
+	ol(items = [], attributes = {}) {
+		const listItems = items.map(item =>
+			this.element('li', {}, item)
+		);
+		return this.element('ol', attributes, listItems);
+	}
+
+	h4(attributes = {}, content = '', options = {}) {
+		return this.element('h4', attributes, content, options);
+	}
+
+	/**
+	 * Создание таблицы
+	 */
+	table(headers = [], rows = [], attributes = {}) {
+		const headerCells = headers.map(header =>
+			this.element('th', {}, header)
+		);
+		const headerRow = this.element('tr', {}, headerCells);
+		const thead = this.element('thead', {}, headerRow);
+
+		const bodyRows = rows.map(row => {
+			const cells = row.map(cell =>
+				this.element('td', {}, cell)
+			);
+			return this.element('tr', {}, cells);
+		});
+		const tbody = this.element('tbody', {}, bodyRows);
+
+		return this.element('table', attributes, [thead, tbody]);
+	}
+
+	/**
+	 * Методы для форм
+	 */
+	csrfToken(token) {
+		return this.element('input', {
+			type: 'hidden',
+			name: '_token',
+			value: token
+		});
+	}
+
+	method(method) {
+		return this.element('input', {
+			type: 'hidden',
+			name: '_method',
+			value: method
+		});
+	}
+
+	/**
+	 * Создание элемента с обработчиками событий
+	 */
+	withEvents(element, events = {}) {
+		if (element instanceof Node && this.mode === 'dom') {
+			Object.entries(events).forEach(([event, handler]) => {
+				element.addEventListener(event, handler);
+			});
+		}
+		return element;
+	}
+
+	/**
+	 * Добавление классов
+	 */
+	addClass(element, className) {
+		if (element instanceof Node && this.mode === 'dom') {
+			element.classList.add(className);
+		} else if (typeof element === 'string') {
+			// Для строкового режима - модифицируем атрибут class
+			const match = element.match(/<(\w+)([^>]*)>/);
+			if (match) {
+				const [fullMatch, tag, attrs] = match;
+				const newAttrs = this._addClassToAttributes(attrs, className);
+				return element.replace(fullMatch, `<${tag}${newAttrs}>`);
+			}
+		}
+		return element;
+	}
+
+	_addClassToAttributes(attrs, className) {
+		const classMatch = attrs.match(/class="([^"]*)"/);
+		if (classMatch) {
+			const existingClass = classMatch[1];
+			const newClass = existingClass ? `${existingClass} ${className}` : className;
+			return attrs.replace(/class="[^"]*"/, `class="${newClass}"`);
+		} else {
+			return `${attrs} class="${className}"`;
+		}
+	}
+
+	/**
+	 * Создание компонента
+	 */
+	component(name, props = {}, slots = {}) {
+		// Можно добавить заготовленные компоненты
+		const components = {
+			'eye': (props) => {
+				const type = props.type || 'open';
+				const svg = this.element('', {},  getSVG(`eye-${type}`))
+				return this.span(
+					{
+						'data-vg-toggle': 'pass',
+						'data-bs-toggle': 'tooltip',
+						'title': 'Скрыть',
+						'class': props.class || ''
+					},
+					[
+						svg
+					]
+				);
+			},
+			'alert': (props) => {
+				const type = props.type || 'info';
+				return this.div(
+					{
+						class: `alert alert-${type}`,
+						role: 'alert'
+					},
+					props.content || ''
+				);
+			},
+			'card': (props) => {
+				const header = props.header ?
+					this.div({ class: 'card-header' }, props.header) : '';
+				const body = this.div({ class: 'card-body' }, props.body || '');
+				const footer = props.footer ?
+					this.div({ class: 'card-footer' }, props.footer) : '';
+
+				return this.div(
+					{ class: 'card' },
+					[header, body, footer]
+				);
+			}
+		};
+
+		if (components[name]) {
+			return components[name](props);
+		}
+
+		return this.div({ class: `component-${name}` }, '');
+	}
+}
+
+function Html(mode = 'string') {
+	const builder = new LaravelHtmlBuilder(mode);
+
+	const handler = {
+		get(target, prop) {
+			if (prop in target) {
+				return target[prop].bind(target);
+			}
+
+			// Динамическое создание метода для любого тега
+			return function(attributes = {}, content = '', options = {}) {
+				return target.element(prop, attributes, content, options);
+			};
+		}
+	};
+
+	return new Proxy(builder, handler);
 }
 
-export default Templater;
+export default Html;