@onetype/framework 2.0.45 → 2.0.46

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

@@ -1,283 +1,281 @@
-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 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 = () =>
+onetype.AddonReady('directives', function(directives)
+{
+	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 dataAttr = data['data']?.value;
+			const config = {};
+			const methods = {};
 
-			if(!dataAttr)
+			methods.init = () =>
 			{
-				return {};
-			}
+				methods.config();
+				methods.state();
+				methods.element();
+				methods.compile();
+				methods.handler();
+			};
 
-			try
+			methods.config = () =>
 			{
-				return JSON.parse(dataAttr);
-			}
-			catch(e)
-			{
-				return onetype.Function(dataAttr, compile.data, false) || {};
-			}
-		};
+				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.normalizeUrl = (endpoint) =>
-		{
-			if(/^https?:\/\//.test(endpoint))
+			methods.parseData = () =>
 			{
-				return endpoint;
-			}
+				const dataAttr = data['data']?.value;
 
-			return endpoint.startsWith('/') ? endpoint : '/' + endpoint;
-		};
+				if(!dataAttr)
+				{
+					return {};
+				}
 
-		methods.state = () =>
-		{
-			if(!compile.data[config.bind])
-			{
-				compile.data[config.bind] = {
-					response: null,
-					error: null,
-					loading: false
-				};
-			}
-		};
+				try
+				{
+					return JSON.parse(dataAttr);
+				}
+				catch(e)
+				{
+					return onetype.Function(dataAttr, compile.data, false) || {};
+				}
+			};
 
-		methods.element = () =>
-		{
-			config.html = node.innerHTML;
-			config.form = document.createElement('form');
-			config.form.setAttribute('autocomplete', 'off');
+			methods.normalizeUrl = (endpoint) =>
+			{
+				if(/^https?:\/\//.test(endpoint))
+				{
+					return endpoint;
+				}
 
-			const reserved = ['endpoint', 'url', 'bind', 'method', 'on-success', 'on-error', 'reset', 'stop', 'data', 'redirect', 'post', 'get'];
+				return endpoint.startsWith('/') ? endpoint : '/' + endpoint;
+			};
 
-			Array.from(node.attributes).forEach(attr =>
+			methods.state = () =>
 			{
-				if(!reserved.includes(attr.name))
+				if(!compile.data[config.bind])
 				{
-					config.form.setAttribute(attr.name, attr.value);
+					compile.data[config.bind] = {
+						response: null,
+						error: null,
+						loading: false
+					};
 				}
-			});
-		};
-
-		methods.compile = () =>
-		{
-			const compiled = item.Compile(config.html, compile.data);
+			};
 
-			while(compiled.element.firstChild)
+			methods.element = () =>
 			{
-				config.form.appendChild(compiled.element.firstChild);
-			}
+				config.html = node.innerHTML;
+				config.form = document.createElement('form');
+				config.form.setAttribute('autocomplete', 'off');
 
-			node.replaceWith(config.form);
-			compile.children = false;
-		};
+				const reserved = ['endpoint', 'url', 'bind', 'method', 'on-success', 'on-error', 'reset', 'stop', 'data', 'redirect', 'post', 'get'];
 
-		methods.handler = () =>
-		{
-			config.form.otForm = async (event) =>
+				Array.from(node.attributes).forEach(attr =>
+				{
+					if(!reserved.includes(attr.name))
+					{
+						config.form.setAttribute(attr.name, attr.value);
+					}
+				});
+			};
+
+			methods.compile = () =>
 			{
-				event.preventDefault();
+				const compiled = item.Compile(config.html, compile.data);
 
-				if(config.stop)
+				while(compiled.element.firstChild)
 				{
-					event.stopPropagation();
+					config.form.appendChild(compiled.element.firstChild);
 				}
 
-				await methods.submit();
+				node.replaceWith(config.form);
+				compile.children = false;
 			};
-		};
-
-		methods.submit = async () =>
-		{
-			const state = compile.data[config.bind];
-			const formData = methods.extract();
-
-			state.loading = true;
-			state.error = null;
 
-			try
+			methods.handler = () =>
 			{
-				const submitData = Object.assign({}, formData, config.data);
-				const response = await methods.fetch(submitData);
+				config.form.otForm = async (event) =>
+				{
+					event.preventDefault();
 
-				state.response = response.data !== undefined ? response.data : response;
-				state.error = null;
-				state.loading = false;
+					if(config.stop)
+					{
+						event.stopPropagation();
+					}
 
-				methods.success();
-			}
-			catch(err)
-			{
-				state.response = null;
-				state.error = err.message;
-				state.loading = false;
+					await methods.submit();
+				};
+			};
 
-				methods.error(err);
-			}
-			finally
+			methods.submit = async () =>
 			{
-				compile.data.Update();
-			}
-		};
-
-		methods.extract = () =>
-		{
-			const formData = {};
-			const inputs = config.form.querySelectorAll('input[name], textarea[name], select[name]');
+				const state = compile.data[config.bind];
+				const formData = methods.extract();
 
-			inputs.forEach(input =>
-			{
-				const name = input.getAttribute('name');
+				state.loading = true;
+				state.error = null;
 
-				if(!name)
+				try
 				{
-					return;
-				}
+					const submitData = Object.assign({}, formData, config.data);
+					const response = await methods.fetch(submitData);
 
-				if(input.type === 'checkbox')
-				{
-					formData[name] = input.checked;
+					state.response = response.data !== undefined ? response.data : response;
+					state.error = null;
+					state.loading = false;
+
+					methods.success();
 				}
-				else if(input.type === 'radio')
+				catch(err)
 				{
-					if(input.checked)
-					{
-						formData[name] = input.value;
-					}
+					state.response = null;
+					state.error = err.message;
+					state.loading = false;
+
+					methods.error(err);
 				}
-				else
+				finally
 				{
-					formData[name] = input.value;
+					compile.data.Update();
 				}
-			});
+			};
 
-			return formData;
-		};
+			methods.extract = () =>
+			{
+				const formData = {};
+				const inputs = config.form.querySelectorAll('input[name], textarea[name], select[name]');
 
-		methods.fetch = async (data) =>
-		{
-			const response = await fetch(config.url, {
-				method: config.method,
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify(data)
-			});
+				inputs.forEach(input =>
+				{
+					const name = input.getAttribute('name');
 
-			if(!response.ok)
-			{
-				throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
-			}
+					if(!name)
+					{
+						return;
+					}
 
-			return response.json();
-		};
+					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;
+					}
+				});
 
-		methods.success = () =>
-		{
-			if(config.reset)
-			{
-				config.form.reset();
-			}
+				return formData;
+			};
 
-			if(config.redirect)
+			methods.fetch = async (data) =>
 			{
-				onetype.AddonGet('pages')?.Fn('change', null, config.redirect);
-				return;
-			}
+				const response = await fetch(config.url, {
+					method: config.method,
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(data)
+				});
 
-			if(config.onSuccess)
+				if(!response.ok)
+				{
+					throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
+				}
+
+				return response.json();
+			};
+
+			methods.success = () =>
 			{
-				const callback = onetype.Function(config.onSuccess, compile.data, false);
+				if(config.reset)
+				{
+					config.form.reset();
+				}
 
-				if(typeof callback === 'function')
+				if(config.redirect)
 				{
-					callback(compile.data[config.bind].response);
+					onetype.AddonGet('pages')?.Fn('change', null, config.redirect);
+					return;
 				}
-			}
 
-			onetype.Emit('@form.success', {
-				bind: config.bind,
-				response: compile.data[config.bind].response
-			});
-		};
+				if(config.onSuccess)
+				{
+					const callback = onetype.Function(config.onSuccess, compile.data, false);
 
-		methods.error = (err) =>
-		{
-			onetype.Error(500, 'Form submit error.', {bind: config.bind});
+					if(typeof callback === 'function')
+					{
+						callback(compile.data[config.bind].response);
+					}
+				}
+
+				onetype.Emit('@form.success', {
+					bind: config.bind,
+					response: compile.data[config.bind].response
+				});
+			};
 
-			if(config.onError)
+			methods.error = (err) =>
 			{
-				const callback = onetype.Function(config.onError, compile.data, false);
+				onetype.Error(500, 'Form submit error.', {bind: config.bind});
 
-				if(typeof callback === 'function')
+				if(config.onError)
 				{
-					callback(err.message);
-				}
-			}
+					const callback = onetype.Function(config.onError, compile.data, false);
 
-			onetype.Emit('@form.error', {
-				bind: config.bind,
-				error: err.message
-			});
-		};
+					if(typeof callback === 'function')
+					{
+						callback(err.message);
+					}
+				}
 
-		methods.init();
-	}
-});
+				onetype.Emit('@form.error', {
+					bind: config.bind,
+					error: err.message
+				});
+			};
 
-onetype.AddonReady('directives', function()
-{
+			methods.init();
+		}
+	});
+	
 	document.addEventListener('submit', function(event)
 	{
 		const node = event.target;

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

@@ -1,50 +1,53 @@
-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))
+onetype.AddonReady('directives', function(directives)
+{
+    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)
         {
-            return;
-        }
-
-        node.textContent = node.textContent.replace(/\{\{\s*([^}]+)\s*\}\}/g, (_, expression) =>
-        {
-            try
+            if (!/\{\{.*\}\}/.test(node.textContent))
             {
-                const result = onetype.Function(expression, compile.data, false);
+                return;
+            }
 
-                if (result == null)
+            node.textContent = node.textContent.replace(/\{\{\s*([^}]+)\s*\}\}/g, (_, expression) =>
+            {
+                try
                 {
-                    return '';
-                }
+                    const result = onetype.Function(expression, compile.data, false);
 
-                const type = typeof result;
+                    if (result == null)
+                    {
+                        return '';
+                    }
 
-                if (['boolean', 'number', 'string'].includes(type))
-                {
-                    return result;
-                }
+                    const type = typeof result;
 
-                const stringified = result.toString();
+                    if (['boolean', 'number', 'string'].includes(type))
+                    {
+                        return result;
+                    }
 
-                if (stringified !== '[object Object]')
+                    const stringified = result.toString();
+
+                    if (stringified !== '[object Object]')
+                    {
+                        return stringified;
+                    }
+
+                    return `{{${type}}}`;
+                }
+                catch(error)
                 {
-                    return stringified;
+                    return `{{Error: ${error.message}}}`;
                 }
-
-                return `{{${type}}}`;
-            }
-            catch(error)
-            {
-                return `{{Error: ${error.message}}}`;
-            }
-        });
-    }
+            });
+        }
+    });
 });

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

@@ -1,44 +1,47 @@
-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)
+onetype.AddonReady('directives', function(directives)
+{
+    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 results = onetype.Function(html, compile.data, false);
+            const html = data['ot-html'].value;
 
-            if(typeof results === 'string' && results.trim())
+            if(html)
             {
-                const originalChildren = compile.children;
-                compile.children = false;
+                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();
 
-                const compiled = item.Compile(results, compile.data);
-                const fragment = document.createDocumentFragment();
+                    while(compiled.element.firstChild)
+                    {
+                        fragment.appendChild(compiled.element.firstChild);
+                    }
 
-                while(compiled.element.firstChild)
+                    node.replaceWith(fragment);
+                    compile.children = originalChildren;
+                }
+                else
                 {
-                    fragment.appendChild(compiled.element.firstChild);
+                    node.remove();
                 }
-
-                node.replaceWith(fragment);
-                compile.children = originalChildren;
-            }
-            else
-            {
-                node.remove();
             }
         }
-    }
-});
+    });
+});