divhunt 2.0.0

package/addons/render/directives/front/js/items/660-form.js

@@ -0,0 +1,291 @@
+import directives from '#directives/addon.js';
+
+directives.ItemAdd({
+	id: 'dh-form',
+	icon: 'send',
+	name: 'Form',
+	description: 'Submit form data to endpoint and bind response to component data',
+	category: 'data',
+	trigger: 'node',
+	order: 660,
+	tag: 'dh-form',
+	attributes: {
+		'post': ['string'],
+		'get': ['string'],
+		'endpoint': ['string'],
+		'url': ['string'],
+		'bind': ['string'],
+		'method': ['string'],
+		'redirect': ['string'],
+		'on-success': ['string'],
+		'on-error': ['string'],
+		'reset': ['boolean'],
+		'stop': ['boolean'],
+		'data': ['string']
+	},
+	code: function(data, item, compile, node, identifier)
+	{
+		const divhunt = item.GetDivhunt();
+		const config = {};
+		const methods = {};
+
+		methods.init = () =>
+		{
+			methods.config();
+			methods.state();
+			methods.element();
+			methods.compile();
+			methods.handler();
+		};
+
+		methods.config = () =>
+		{
+			const post = data['post']?.value;
+			const get = data['get']?.value;
+
+			config.endpoint = post || get || data['endpoint']?.value || data['url']?.value || '';
+			config.bind = data['bind']?.value || 'form';
+			config.method = get ? 'GET' : (data['method']?.value || 'POST').toUpperCase();
+			config.redirect = data['redirect']?.value;
+			config.onSuccess = data['on-success']?.value;
+			config.onError = data['on-error']?.value;
+			config.reset = data['reset']?.value || false;
+			config.stop = data['stop']?.value || false;
+			config.data = methods.parseData();
+			config.url = methods.normalizeUrl(config.endpoint);
+		};
+
+		methods.parseData = () =>
+		{
+			const dataAttr = data['data']?.value;
+
+			if(!dataAttr)
+			{
+				return {};
+			}
+
+			try
+			{
+				return JSON.parse(dataAttr);
+			}
+			catch(e)
+			{
+				return divhunt.Function(dataAttr, compile.data, false) || {};
+			}
+		};
+
+		methods.normalizeUrl = (endpoint) =>
+		{
+			if(/^https?:\/\//.test(endpoint))
+			{
+				return endpoint;
+			}
+
+			return endpoint.startsWith('/') ? endpoint : '/' + endpoint;
+		};
+
+		methods.state = () =>
+		{
+			if(!compile.data[config.bind])
+			{
+				compile.data[config.bind] = {
+					response: null,
+					error: null,
+					loading: false
+				};
+			}
+		};
+
+		methods.element = () =>
+		{
+			config.html = node.innerHTML;
+			config.form = document.createElement('form');
+			config.form.setAttribute('autocomplete', 'off');
+
+			const reserved = ['endpoint', 'url', 'bind', 'method', 'on-success', 'on-error', 'reset', 'stop', 'data', 'redirect', 'post', 'get'];
+
+			Array.from(node.attributes).forEach(attr =>
+			{
+				if(!reserved.includes(attr.name))
+				{
+					config.form.setAttribute(attr.name, attr.value);
+				}
+			});
+		};
+
+		methods.compile = () =>
+		{
+			const compiled = item.Compile(config.html, compile.data);
+
+			while(compiled.element.firstChild)
+			{
+				config.form.appendChild(compiled.element.firstChild);
+			}
+
+			node.replaceWith(config.form);
+			compile.children = false;
+		};
+
+		methods.handler = () =>
+		{
+			config.form.dhForm = async (event) =>
+			{
+				event.preventDefault();
+
+				if(config.stop)
+				{
+					event.stopPropagation();
+				}
+
+				await methods.submit();
+			};
+		};
+
+		methods.submit = async () =>
+		{
+			const state = compile.data[config.bind];
+
+			state.loading = true;
+			state.error = null;
+
+			try
+			{
+				const formData = methods.extract();
+				const submitData = Object.assign({}, formData, config.data);
+				const response = await methods.fetch(submitData);
+
+				state.response = response.data !== undefined ? response.data : response;
+				state.error = null;
+				state.loading = false;
+
+				methods.success();
+			}
+			catch(err)
+			{
+				state.response = null;
+				state.error = err.message;
+				state.loading = false;
+
+				methods.error(err);
+			}
+			finally
+			{
+				compile.data.Update();
+			}
+		};
+
+		methods.extract = () =>
+		{
+			const formData = {};
+			const inputs = config.form.querySelectorAll('input[name], textarea[name], select[name]');
+
+			inputs.forEach(input =>
+			{
+				const name = input.getAttribute('name');
+
+				if(!name)
+				{
+					return;
+				}
+
+				if(input.type === 'checkbox')
+				{
+					formData[name] = input.checked;
+				}
+				else if(input.type === 'radio')
+				{
+					if(input.checked)
+					{
+						formData[name] = input.value;
+					}
+				}
+				else
+				{
+					formData[name] = input.value;
+				}
+			});
+
+			return formData;
+		};
+
+		methods.fetch = async (data) =>
+		{
+			const response = await fetch(config.url, {
+				method: config.method,
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(data)
+			});
+
+			if(!response.ok)
+			{
+				throw new Error(`HTTP ${response.status}`);
+			}
+
+			return response.json();
+		};
+
+		methods.success = () =>
+		{
+			if(config.reset)
+			{
+				config.form.reset();
+			}
+
+			if(config.redirect)
+			{
+				pages.Fn('change', config.redirect, {}, { path: true });
+				return;
+			}
+
+			if(config.onSuccess)
+			{
+				const callback = divhunt.Function(config.onSuccess, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(compile.data[config.bind].response);
+				}
+			}
+
+			divhunt.Emit('form.success', {
+				bind: config.bind,
+				response: compile.data[config.bind].response
+			});
+		};
+
+		methods.error = (err) =>
+		{
+			console.error('Form submit error:', err);
+
+			if(config.onError)
+			{
+				const callback = divhunt.Function(config.onError, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(err.message);
+				}
+			}
+
+			divhunt.Emit('form.error', {
+				bind: config.bind,
+				error: err.message
+			});
+		};
+
+		methods.init();
+	}
+});
+
+divhunt.AddonReady('directives', function()
+{
+	document.addEventListener('submit', function(event)
+	{
+		const node = event.target;
+
+		if('dhForm' in node)
+		{
+			node.dhForm(event);
+		}
+	});
+});

package/addons/render/directives/front/js/items/700-text.js

@@ -0,0 +1,50 @@
+directives.ItemAdd({
+    id: 'dh-text',
+    icon: 'text_fields',
+    name: 'Text',
+    description: 'Set element text content dynamically. Updates text nodes based on data expressions.',
+    category: 'content',
+    trigger: 'node',
+    order: 700,
+    type: '3',
+    code: function(data, item, compile, node, identifier)
+    {
+        if (!/\{\{.*\}\}/.test(node.textContent))
+        {
+            return;
+        }
+
+        node.textContent = node.textContent.replace(/\{\{\s*([^}]+)\s*\}\}/g, (_, expression) =>
+        {
+            try
+            {
+                const result = divhunt.Function(expression, compile.data, false);
+
+                if (result == null)
+                {
+                    return '';
+                }
+
+                const type = typeof result;
+
+                if (['boolean', 'number', 'string'].includes(type))
+                {
+                    return result;
+                }
+
+                const stringified = result.toString();
+
+                if (stringified !== '[object Object]')
+                {
+                    return stringified;
+                }
+
+                return `{{${type}}}`;
+            }
+            catch(error)
+            {
+                return `{{Error: ${error.message}}}`;
+            }
+        });
+    }
+});

package/addons/render/directives/front/js/items/750-html.js

@@ -0,0 +1,44 @@
+directives.ItemAdd({
+    id: 'dh-html',
+    icon: 'code',
+    name: 'HTML',
+    description: 'Set element innerHTML dynamically. Renders HTML content from data expressions.',
+    category: 'content',
+    trigger: 'node',
+    order: 750,
+    strict: true,
+    type: '1',
+    attributes: {
+        'dh-html': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const html = data['dh-html'].value;
+
+        if(html)
+        {
+            const results = divhunt.Function(html, compile.data, false);
+
+            if(typeof results === 'string' && results.trim())
+            {
+                const originalChildren = compile.children;
+                compile.children = false;
+
+                const compiled = item.Compile(results, compile.data);
+                const fragment = document.createDocumentFragment();
+
+                while(compiled.element.firstChild)
+                {
+                    fragment.appendChild(compiled.element.firstChild);
+                }
+
+                node.replaceWith(fragment);
+                compile.children = originalChildren;
+            }
+            else
+            {
+                node.remove();
+            }
+        }
+    }
+});

package/addons/render/elements/front/#register/addon.js

@@ -0,0 +1,12 @@
+const elements = divhunt.Addon('elements', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('icon', ['string', 'extension']);
+    addon.Field('name', ['string', '']);
+    addon.Field('description', ['string', '']);
+    addon.Field('category', ['string', '']);
+    addon.Field('collection', ['string', '']);
+    addon.Field('config', ['object', {}]);
+    addon.Field('example', ['array', []]);
+    addon.Field('render', ['function']);
+});

package/addons/render/elements/front/item/catch/add.js

@@ -0,0 +1,9 @@
+elements.ItemOn('add', (item) =>
+{
+    elements.RenderAdd(item.Get('id'), function()
+    {
+        this.Define(item.Get('config'));
+
+        return item.Get('render').call(this);
+    });
+})

package/addons/render/elements/front/items/directives/element.js

@@ -0,0 +1,76 @@
+divhunt.AddonReady('directives', (directives) =>
+{
+	directives.ItemAdd({
+		id: 'jt-element',
+		icon: 'auto_awesome',
+		name: 'Element Load',
+		description: 'Load and render elements using custom tag syntax. Automatically detects <e-{name}> tags and renders corresponding elements.',
+		trigger: 'node',
+		order: 1100,
+		strict: false,
+		type: '1',
+		code: function(data, item, compile, node, identifier)
+		{
+			if (!node.tagName || !node.tagName.toLowerCase().startsWith('e-') || node.tagName.toLowerCase() === 'e-bind')
+			{
+				return;
+			}
+
+			const tagName = node.tagName.toLowerCase();
+			const elementName = tagName.substring(2);
+
+			const attributes = {
+				wrapper: {},
+				data: {}
+			};
+
+			for (let i = 0; i < node.attributes.length; i++)
+			{
+				const attr = node.attributes[i];
+
+				if (attr.name.startsWith('#'))
+				{
+					attributes.wrapper[attr.name.substring(1)] = attr.value;
+				}
+				else if(attr.name.startsWith(':'))
+				{
+					attributes.data[attr.name.substring(1)] = divhunt.Function(attr.value, compile.data, false);
+				}
+				else
+				{
+					attributes.data[attr.name] = attr.value;
+				}
+			}
+
+			const slots = {};
+
+			if(node.hasChildNodes())
+			{
+				Array.from(node.childNodes).forEach(child =>
+				{
+					if(child.nodeType === Node.ELEMENT_NODE)
+					{
+						const slot = child.getAttribute('slot');
+
+						if(slot)
+						{
+							child.removeAttribute('slot');
+							slots[slot] = { html: child.outerHTML, data: compile.data };
+						}
+					}
+				});
+			}
+
+			const render = divhunt.Addon('elements').Render(elementName, attributes.data, attributes.wrapper, slots);
+
+			if(render)
+			{
+				node.replaceWith(render.Element);
+			}
+			else
+			{
+				node.innerText = 'Element ' + elementName + ' does not exist.';
+			}
+		}
+	});
+});

package/addons/render/elements/front/items/self/base/menu/menu.js

@@ -0,0 +1,96 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'menu',
+	icon: 'list',
+	name: 'Menu',
+	description: 'Menu item with icon, label, badge, expandable children, and nested level support.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		icon: {
+			type: 'string',
+			value: 'folder'
+		},
+		label: {
+			type: 'string',
+			value: 'Dashboard'
+		},
+		badge: {
+			type: 'string',
+			value: ''
+		},
+		href: {
+			type: 'string',
+			value: '#'
+		},
+		level: {
+			type: 'number',
+			value: 0
+		},
+		active: {
+			type: 'boolean',
+			value: false
+		},
+		expanded: {
+			type: 'boolean',
+			value: false
+		},
+		expandable: {
+			type: 'boolean',
+			value: false
+		},
+		disabled: {
+			type: 'boolean',
+			value: false
+		},
+		variant: {
+			type: 'array',
+			value: ['size-m'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+		},
+		onClick: {
+			type: 'function'
+		},
+		onExpand: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		this.handleClick = () =>
+		{
+			if (this.disabled) return;
+
+			if (this.onClick)
+			{
+				this.onClick();
+			}
+		};
+
+		this.handleExpand = (e) =>
+		{
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (this.disabled) return;
+
+			this.expanded = !this.expanded;
+
+			if (this.onExpand)
+			{
+				this.onExpand({ expanded: this.expanded });
+			}
+		};
+
+		return `
+			<a :href="href" class="holder" :variant="variant.join(' ')" :level="level" :active="active" :expanded="expanded" :disabled="disabled" dh-click="handleClick">
+				<i dh-if="expandable" class="chevron" dh-click="handleExpand">chevron_right</i>
+				<i dh-if="icon">{{ icon }}</i>
+				<span>{{ label }}</span>
+				<e-tag dh-if="badge" :text="badge" :variant="['bg-3', 'size-s']"></e-tag>
+				<slot name="end"></slot>
+			</a>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/base/menu/styles/base.css

@@ -0,0 +1,116 @@
+.e-4de878b > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+	width: 100%;
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	color: var(--dh-text-1);
+	text-decoration: none;
+	font-size: var(--dh-size-m);
+	font-weight: 500;
+	line-height: 1.5;
+	border-radius: 0;
+	border-bottom: 1px solid var(--dh-bg-3-border);
+	cursor: pointer;
+	user-select: none;
+	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.e-4de878b > .holder:last-child
+{
+	border-bottom: none;
+}
+
+.e-4de878b > .holder:focus-visible
+{
+	outline: 2px inset var(--dh-brand);
+	outline-offset: 1px;
+}
+
+.e-4de878b > .holder:hover
+{
+	background: var(--dh-bg-3);
+}
+
+.e-4de878b > .holder[active]
+{
+	background: var(--dh-bg-3);
+	color: var(--dh-brand);
+	font-weight: 600;
+	border-left: 3px solid var(--dh-brand);
+	padding-left: calc(var(--dh-spacing-m) - 3px);
+	transform: scale(1.01);
+}
+
+.e-4de878b > .holder[active] > i
+{
+	color: var(--dh-brand);
+}
+
+.e-4de878b > .holder[disabled]
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.e-4de878b > .holder[level="1"]
+{
+	padding-left: var(--dh-spacing-l);
+}
+
+.e-4de878b > .holder[level="2"]
+{
+	padding-left: 50px;
+}
+
+.e-4de878b > .holder[level="3"]
+{
+	padding-left: 66px;
+}
+
+.e-4de878b > .holder[level="4"]
+{
+	padding-left: 82px;
+}
+
+.e-4de878b > .holder > .chevron
+{
+	flex-shrink: 0;
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.e-4de878b > .holder[expanded] > .chevron
+{
+	transform: rotate(90deg);
+}
+
+.e-4de878b > .holder > i
+{
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+	font-size: 20px;
+	color: var(--dh-text-2);
+	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.e-4de878b > .holder:hover > i
+{
+	color: var(--dh-text-1);
+}
+
+.e-4de878b > .holder > span
+{
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}