@onetype/framework 2.0.20

package/addons/render/directives/front/js/items/500-mouse-move.js

@@ -0,0 +1,45 @@
+directives.ItemAdd({
+    id: 'ot-mouse-move',
+    icon: 'pan_tool',
+    name: 'Mouse Move',
+    description: 'Handle mouse move events. Track cursor position and movement within elements.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-mouse-move': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-mouse-move'].value;
+
+        node.otMouseMove = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+    });
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('mousemove', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otMouseMove' in node)
+            {
+                node.otMouseMove(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

package/addons/render/directives/front/js/items/500-scroll.js

@@ -0,0 +1,45 @@
+directives.ItemAdd({
+    id: 'ot-scroll',
+    icon: 'unfold_more',
+    name: 'Scroll',
+    description: 'Handle scroll events on elements or window. Track scroll position for infinite loading and animations.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-scroll': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-scroll'].value;
+
+        node.otScroll = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('scroll', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otScroll' in node)
+            {
+                node.otScroll(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

package/addons/render/directives/front/js/items/500-submit.js

@@ -0,0 +1,52 @@
+directives.ItemAdd({
+    id: 'ot-submit',
+    icon: 'send',
+    name: 'Submit',
+    description: 'Handle form submission events. Prevents default behavior and executes custom submit logic.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-submit': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-submit'];
+
+        node.otSubmit = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data.modifiers)
+            {
+                if (data.modifiers.prevent) event.preventDefault();
+                if (data.modifiers.stop) event.stopPropagation();
+            }
+
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('submit', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otSubmit' in node)
+            {
+                node.otSubmit(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

package/addons/render/directives/front/js/items/650-fetch.js

@@ -0,0 +1,189 @@
+import directives from '#directives/addon.js';
+
+directives.ItemAdd({
+	id: 'ot-fetch',
+	icon: 'cloud_download',
+	name: 'Fetch',
+	description: 'Fetch data from URL or endpoint and bind to component data',
+	category: 'data',
+	trigger: 'node',
+	order: 650,
+	tag: 'ot-fetch',
+	attributes: {
+		'get': ['string'],
+		'endpoint': ['string'],
+		'url': ['string'],
+		'bind': ['string'],
+		'params': ['string'],
+		'on-success': ['string'],
+		'on-error': ['string']
+	},
+	code: function(data, item, compile, node, identifier)
+	{
+		const onetype = item.GetOneType();
+		const config = {};
+		const methods = {};
+
+		methods.init = () =>
+		{
+			methods.config();
+
+			if(methods.fetched())
+			{
+				return;
+			}
+
+			methods.state();
+			methods.execute();
+		};
+
+		methods.config = () =>
+		{
+			const get = node.getAttribute('get');
+
+			config.endpoint = get || node.getAttribute('endpoint') || node.getAttribute('url') || '';
+			config.bind = node.getAttribute('bind') || 'fetch';
+			config.onSuccess = node.getAttribute('on-success');
+			config.onError = node.getAttribute('on-error');
+			config.params = methods.parseParams();
+			config.url = methods.buildUrl();
+			config.html = node.innerHTML;
+		};
+
+		methods.parseParams = () =>
+		{
+			const paramsAttr = node.getAttribute('params');
+
+			if(!paramsAttr)
+			{
+				return {};
+			}
+
+			try
+			{
+				return JSON.parse(paramsAttr);
+			}
+			catch(e)
+			{
+				return onetype.Function(paramsAttr, compile.data, false) || {};
+			}
+		};
+
+		methods.buildUrl = () =>
+		{
+			let url = config.endpoint;
+
+			if(!/^https?:\/\//.test(url))
+			{
+				url = url.startsWith('/') ? url : '/' + url;
+			}
+
+			if(Object.keys(config.params).length > 0)
+			{
+				const query = Object.entries(config.params)
+					.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+					.join('&');
+
+				url += (url.includes('?') ? '&' : '?') + query;
+			}
+
+			return url;
+		};
+
+		methods.fetched = () =>
+		{
+			return compile.data[config.bind] && compile.data[config.bind].fetched;
+		};
+
+		methods.state = () =>
+		{
+			compile.data[config.bind] = {
+				response: null,
+				error: null,
+				loading: true,
+				success: false,
+				fetched: true
+			};
+
+			node.innerHTML = '';
+			compile.children = false;
+		};
+
+		methods.execute = () =>
+		{
+			fetch(config.url)
+				.then(methods.response)
+				.then(methods.success)
+				.catch(methods.error)
+				.finally(methods.complete);
+		};
+
+		methods.response = (response) =>
+		{
+			if(!response.ok)
+			{
+				throw new Error(`HTTP ${response.status}`);
+			}
+
+			return response.json();
+		};
+
+		methods.success = (result) =>
+		{
+			const state = compile.data[config.bind];
+
+			state.response = result.data !== undefined ? result.data : result;
+			state.error = null;
+			state.loading = false;
+			state.success = true;
+
+			if(config.onSuccess)
+			{
+				const callback = onetype.Function(config.onSuccess, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(state.response);
+				}
+			}
+		};
+
+		methods.error = (err) =>
+		{
+			const state = compile.data[config.bind];
+
+			state.response = null;
+			state.error = err.message;
+			state.loading = false;
+			state.success = false;
+
+			console.error('Fetch error:', err);
+
+			if(config.onError)
+			{
+				const callback = onetype.Function(config.onError, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(err.message);
+				}
+			}
+		};
+
+		methods.complete = () =>
+		{
+			const compiled = item.Compile(config.html, compile.data);
+			const fragment = document.createDocumentFragment();
+
+			while(compiled.element.firstChild)
+			{
+				fragment.appendChild(compiled.element.firstChild);
+			}
+
+			node.replaceWith(fragment);
+			compile.data.Update();
+		};
+
+		methods.init();
+	}
+});

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

@@ -0,0 +1,291 @@
+import directives from '#directives/addon.js';
+
+directives.ItemAdd({
+	id: 'ot-form',
+	icon: 'send',
+	name: 'Form',
+	description: 'Submit form data to endpoint and bind response to component data',
+	category: 'data',
+	trigger: 'node',
+	order: 660,
+	tag: 'ot-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 onetype = item.GetOneType();
+		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 onetype.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.otForm = async (event) =>
+			{
+				event.preventDefault();
+
+				if(config.stop)
+				{
+					event.stopPropagation();
+				}
+
+				await methods.submit();
+			};
+		};
+
+		methods.submit = async () =>
+		{
+			const state = compile.data[config.bind];
+			const formData = methods.extract();
+
+			state.loading = true;
+			state.error = null;
+
+			try
+			{
+				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 = onetype.Function(config.onSuccess, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(compile.data[config.bind].response);
+				}
+			}
+
+			onetype.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 = onetype.Function(config.onError, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(err.message);
+				}
+			}
+
+			onetype.Emit('form.error', {
+				bind: config.bind,
+				error: err.message
+			});
+		};
+
+		methods.init();
+	}
+});
+
+onetype.AddonReady('directives', function()
+{
+	document.addEventListener('submit', function(event)
+	{
+		const node = event.target;
+
+		if('otForm' in node)
+		{
+			node.otForm(event);
+		}
+	});
+});

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

@@ -0,0 +1,50 @@
+directives.ItemAdd({
+    id: 'ot-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 = onetype.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: 'ot-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: {
+        'ot-html': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const html = data['ot-html'].value;
+
+        if(html)
+        {
+            const results = onetype.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();
+            }
+        }
+    }
+});