@onetype/framework 2.0.42 → 2.0.43

package/addons/float/popup/js/items/directives/tooltip.js

@@ -0,0 +1,72 @@
+onetype.AddonReady('directives', function(directives)
+{
+	document.addEventListener('mouseover', function(event)
+	{
+		let node = event.target;
+
+		while (node && node !== document)
+		{
+			if ('otTooltipConfig' in node && !node.otTooltipShow)
+			{
+				node.otTooltipShow = true;
+				node.otTooltipOverlay = popup.Fn('tooltip', node, node.otTooltipConfig);
+				break;
+			}
+
+			node = node.parentNode;
+		}
+	});
+
+	document.addEventListener('mouseout', function(event)
+	{
+		let node = event.target;
+
+		while (node && node !== document)
+		{
+			if ('otTooltipConfig' in node && node.otTooltipShow)
+			{
+				if (!node.contains(event.relatedTarget))
+				{
+					node.otTooltipShow = false;
+
+					if (node.otTooltipOverlay)
+					{
+						node.otTooltipOverlay.Remove();
+						node.otTooltipOverlay = null;
+					}
+				}
+
+				break;
+			}
+
+			node = node.parentNode;
+		}
+	});
+
+	directives.ItemAdd({
+		id: 'ot-tooltip',
+		icon: 'info',
+		name: 'Tooltip',
+		description: 'Shows tooltip on hover.',
+		trigger: 'node',
+		order: 600,
+		attributes: {
+			'ot-tooltip': ['string|object']
+		},
+		code: function(data, item, compile, node)
+		{
+			const value = data['ot-tooltip'].value;
+
+			if (typeof value === 'string')
+			{
+				node.otTooltipConfig = {text: value};
+			}
+			else if (typeof value === 'object')
+			{
+				node.otTooltipConfig = value;
+			}
+
+			node.otTooltipShow = false;
+		}
+	});
+});

package/addons/render/directives/front/{js/#register/addon.js → addon.js}

@@ -15,18 +15,18 @@ const directives = onetype.Addon('directives', (addon) =>
 
     /* Trigers */
     
-    onetype.EmitOn('addon.render.compile.before', (...data) =>
+    onetype.EmitOn('@addon.render.compile.before', (item, compile, node, identifier) =>
     {
-        directives.Fn('process', 'before', ...data);
+        directives.Fn('process', 'before', item, compile, node, identifier);
     })
-    
-    onetype.EmitOn('addon.render.compile.after', (...data) =>
+
+    onetype.EmitOn('@addon.render.compile.after', (item, compile, node, identifier) =>
     {
-        directives.Fn('process', 'after', ...data);
+        directives.Fn('process', 'after', item, compile, node, identifier);
     })
-    
-    onetype.EmitOn('addon.render.compile.node', (...data) =>
+
+    onetype.EmitOn('@addon.render.compile.node', (item, compile, node, identifier) =>
     {
-        directives.Fn('process', 'node', ...data);
+        directives.Fn('process', 'node', item, compile, node, identifier);
     })
 });

package/addons/render/directives/front/{js/functions → functions}/process/attributes.js

@@ -1,6 +1,11 @@
 directives.Fn('process.attributes', function(node, compile)
 {
-    if (node.nodeType !== Node.ELEMENT_NODE || !node.__attributes)
+    if(node.nodeType !== Node.ELEMENT_NODE || !node.__attributes)
+    {
+        return;
+    }
+
+    if(!node.__attributes.some(attr => attr.name.startsWith(':')))
     {
         return;
     }
@@ -40,7 +45,7 @@ directives.Fn('process.attributes', function(node, compile)
         }
         catch(error)
         {
-            console.error('Dynamic attribute error:', error);
+            onetype.Error(500, 'Dynamic attribute error.');
             node.removeAttribute(attribute.name);
         }
     });

package/addons/render/directives/front/{js/functions → functions}/process/match.js

@@ -1,20 +1,20 @@
-directives.Fn('process.match', function(directive, node)
-{   
-    const tag = directive.Get('tag');
-    const type = directive.Get('type');
-    const attributes = directive.Get('attributes');
+directives.Fn('process.match', function(d, node)
+{
+    const tag = d.tag;
+    const type = d.type;
+    const attributes = d.attributes;
 
     const matches = {
         count: 0,
         total: Object.keys(attributes).length + (tag ? 1 : 0) + (type ? 1 : 0),
     };
 
-    if (tag && node.tagName && node.tagName.toLowerCase() === tag.toLowerCase())
+    if(tag && node.tagName && node.tagName.toLowerCase() === tag.toLowerCase())
     {
         matches.count++;
     }
 
-    if (type && node.nodeType.toString() === type)
+    if(type && node.nodeType.toString() === type)
     {
         matches.count++;
     }
@@ -34,7 +34,7 @@ directives.Fn('process.match', function(directive, node)
         }
     });
 
-    if(directive.Get('strict'))
+    if(d.strict)
     {
         return matches.count === matches.total && matches.total > 0;
     }

package/addons/render/directives/front/functions/process.js

@@ -0,0 +1,88 @@
+directives.Fn('process', function(trigger, item, compile, node, identifier)
+{
+    if (!node)
+    {
+        return;
+    }
+
+    if(!directives.StoreHas('sorted'))
+    {
+        directives.StoreSet('sorted', Object.values(directives.Items()).sort((a, b) => a.Get('order') - b.Get('order')).map(directive => ({
+            item: directive,
+            trigger: directive.Get('trigger'),
+            type: directive.Get('type'),
+            tag: directive.Get('tag'),
+            attributes: directive.Get('attributes'),
+            strict: directive.Get('strict'),
+            code: directive.Get('code')
+        })));
+
+        directives.StoreSet('fn.match', directives.FnGet('process.match').callback);
+        directives.StoreSet('fn.data', directives.FnGet('process.data').callback);
+        directives.StoreSet('fn.attributes', directives.FnGet('process.attributes').callback);
+    }
+
+    if(node.nodeType === 1)
+    {
+        if(!node.attributes.length && !node.tagName.includes('-'))
+        {
+            return;
+        }
+
+        if(node.attributes.length && !node.__attributes)
+        {
+            node.__attributes = Array.from(node.attributes).map(attr => ({
+                name: attr.name,
+                lowerName: attr.name.toLowerCase(),
+                value: attr.value,
+                original: attr
+            }));
+        }
+    }
+    else if(node.nodeType !== 3)
+    {
+        return;
+    }
+
+    const items = directives.StoreGet('sorted');
+    const match = directives.StoreGet('fn.match');
+    const data = directives.StoreGet('fn.data');
+
+    for (let i = 0; i < items.length; i++)
+    {
+        const directive = items[i];
+
+        if(directive.trigger !== trigger)
+        {
+            continue;
+        }
+
+        if(node.nodeType === 3 && directive.type !== '3')
+        {
+            continue;
+        }
+
+        if(!match(directive, node))
+        {
+            continue;
+        }
+
+        const attributes = data(directive.attributes, node, compile);
+
+        try
+        {
+            const result = directive.code.call({}, attributes, item, compile, node, identifier);
+
+            if(result === false)
+            {
+                break;
+            }
+        }
+        catch (error)
+        {
+            onetype.Error(500, 'Directive processing error.');
+        }
+    }
+
+    directives.StoreGet('fn.attributes')(node, compile);
+});

package/{lib/items/directives → addons/render/directives/front/items/self}/1000-render.js

@@ -23,6 +23,7 @@ directives.ItemAdd({
 
 		if(item[name] && item[name].Element)
 		{
+			item[name].Element.__otExternal = { name: 'render', key: name };
 			node.replaceWith(item[name].Element);
 		}
 		else

package/{lib/items/directives → addons/render/directives/front/items/self}/110-show.js

@@ -11,15 +11,13 @@ directives.ItemAdd({
     },
     code: function(data, item, compile, node, identifier)
     {
-        const originalDisplay = node.style.display || '';
-
-        if (!onetype.Function(data['ot-show'].value, compile.data, false))
+        if(!onetype.Function(data['ot-show'].value, compile.data, false))
         {
             node.style.display = 'none';
         }
-        else if (node.style.display === 'none')
+        else if(node.style.display === 'none')
         {
-            node.style.display = originalDisplay;
+            node.style.display = '';
         }
     }
 });

package/{lib/items/directives → addons/render/directives/front/items/self}/160-slot.js

@@ -17,6 +17,7 @@ directives.ItemAdd({
 
         if (slot && slot.Element)
         {
+            slot.Element.__otExternal = { name: 'slot', key: name };
             node.replaceWith(slot.Element);
         }
         else if (slot && slot.html && slot.data)

package/{lib/items/directives → addons/render/directives/front/items/self}/200-for.js

@@ -16,7 +16,7 @@ directives.ItemAdd({
 
         if (!match)
         {
-            console.error(`Invalid ot-for syntax: ${expression}. Expected format: "item in items" or "item, index in items"`);
+            onetype.Error(400, 'Invalid ot-for syntax. Expected: "item in items".');
             return;
         }
 
@@ -44,7 +44,7 @@ directives.ItemAdd({
             }
             else if (!Array.isArray(items))
             {
-                throw(`ot-for expects an array or iterable, got: ${typeof items}`);
+                throw onetype.Error(400, 'ot-for expects an array or iterable.');
             }
 
             const html = node.outerHTML;
@@ -77,7 +77,7 @@ directives.ItemAdd({
         }
         catch (error)
         {
-            console.error(`Error in ot-for directive for "${expression}":`, error);
+            onetype.Error(500, 'Error in ot-for directive.');
         }
         finally
         {

package/addons/render/directives/front/items/self/500-click-outside.js

@@ -0,0 +1,45 @@
+onetype.AddonReady('directives', function()
+{
+	const tracked = new Set();
+
+	document.addEventListener('click', function(event)
+	{
+		tracked.forEach((entry) =>
+		{
+			if(!document.contains(entry.element))
+			{
+				tracked.delete(entry);
+				return;
+			}
+
+			if(!entry.element.contains(event.target) && entry.element !== event.target)
+			{
+				entry.handler(event);
+			}
+		});
+	});
+
+	directives.ItemAdd({
+		id: 'ot-click-outside',
+		trigger: 'node',
+		order: 500,
+		attributes: { 'ot-click-outside': ['string'] },
+		code: function(data, item, compile, node)
+		{
+			const attribute = data['ot-click-outside'].value;
+
+			tracked.add({
+				element: node,
+				handler: (event) =>
+				{
+					const result = onetype.Function(attribute, compile.data, false);
+
+					if(typeof result === 'function')
+					{
+						result({ event });
+					}
+				}
+			});
+		}
+	});
+});

package/addons/render/directives/front/items/self/500-events.js

@@ -0,0 +1,68 @@
+onetype.AddonReady('directives', function()
+{
+	const register = (config) =>
+	{
+		directives.ItemAdd({
+			id: config.id,
+			trigger: 'node',
+			order: 500,
+			attributes: { [config.id]: ['string'] },
+			code: function(data, item, compile, node)
+			{
+				const attribute = data[config.id].value;
+				const modifiers = data[config.id].modifiers;
+
+				node[config.property] = (event) =>
+				{
+					if(modifiers && modifiers.length)
+					{
+						if(modifiers.includes('prevent')) event.preventDefault();
+						if(modifiers.includes('stop')) event.stopPropagation();
+					}
+
+					const result = onetype.Function(attribute, compile.data, false);
+
+					if(typeof result === 'function')
+					{
+						const payload = { event };
+
+						if(config.value && event.target)
+						{
+							payload.value = event.target.value || '';
+						}
+
+						result(payload);
+					}
+				};
+			}
+		});
+
+		document.addEventListener(config.event, function(event)
+		{
+			let node = event.target;
+
+			while(node && node !== document)
+			{
+				if(config.property in node)
+				{
+					node[config.property](event);
+					break;
+				}
+
+				node = node.parentNode;
+			}
+		}, !!config.capture);
+	};
+
+	register({ id: 'ot-click', event: 'click', property: 'otClick' });
+	register({ id: 'ot-double-click', event: 'dblclick', property: 'otDoubleClick' });
+	register({ id: 'ot-input', event: 'input', property: 'otInput', value: true });
+	register({ id: 'ot-change', event: 'change', property: 'otChange', value: true });
+	register({ id: 'ot-focus', event: 'focus', property: 'otFocus', value: true, capture: true });
+	register({ id: 'ot-blur', event: 'blur', property: 'otBlur', value: true, capture: true });
+	register({ id: 'ot-keydown', event: 'keydown', property: 'otKeydown', value: true });
+	register({ id: 'ot-keyup', event: 'keyup', property: 'otKeyup', value: true });
+	register({ id: 'ot-mouse-move', event: 'mousemove', property: 'otMouseMove' });
+	register({ id: 'ot-scroll', event: 'scroll', property: 'otScroll', capture: true });
+	register({ id: 'ot-submit', event: 'submit', property: 'otSubmit' });
+});

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

@@ -0,0 +1,62 @@
+onetype.AddonReady('directives', function()
+{
+	directives.ItemAdd({
+		id: 'ot-mouse-enter',
+		trigger: 'node',
+		order: 500,
+		attributes: { 'ot-mouse-enter': ['string'] },
+		code: function(data, item, compile, node)
+		{
+			const attribute = data['ot-mouse-enter'].value;
+			const modifiers = data['ot-mouse-enter'].modifiers;
+
+			node.otMouseEnter = (event) =>
+			{
+				if(modifiers && modifiers.length)
+				{
+					if(modifiers.includes('prevent')) event.preventDefault();
+					if(modifiers.includes('stop')) event.stopPropagation();
+				}
+
+				const result = onetype.Function(attribute, compile.data, false);
+
+				if(typeof result === 'function')
+				{
+					result({ event });
+				}
+			};
+		}
+	});
+
+	document.addEventListener('mouseover', function(event)
+	{
+		let node = event.target;
+
+		while(node && node !== document)
+		{
+			if('otMouseEnter' in node && !node.__entered)
+			{
+				node.__entered = true;
+				node.otMouseEnter(event);
+				break;
+			}
+
+			node = node.parentNode;
+		}
+	});
+
+	document.addEventListener('mouseout', function(event)
+	{
+		let node = event.target;
+
+		while(node && node !== document)
+		{
+			if('otMouseEnter' in node && node.__entered)
+			{
+				node.__entered = false;
+			}
+
+			node = node.parentNode;
+		}
+	});
+});

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

@@ -0,0 +1,62 @@
+onetype.AddonReady('directives', function()
+{
+	directives.ItemAdd({
+		id: 'ot-mouse-leave',
+		trigger: 'node',
+		order: 500,
+		attributes: { 'ot-mouse-leave': ['string'] },
+		code: function(data, item, compile, node)
+		{
+			const attribute = data['ot-mouse-leave'].value;
+			const modifiers = data['ot-mouse-leave'].modifiers;
+
+			node.otMouseLeave = (event) =>
+			{
+				if(modifiers && modifiers.length)
+				{
+					if(modifiers.includes('prevent')) event.preventDefault();
+					if(modifiers.includes('stop')) event.stopPropagation();
+				}
+
+				const result = onetype.Function(attribute, compile.data, false);
+
+				if(typeof result === 'function')
+				{
+					result({ event });
+				}
+			};
+		}
+	});
+
+	document.addEventListener('mouseout', function(event)
+	{
+		let node = event.target;
+
+		while(node && node !== document)
+		{
+			if('otMouseLeave' in node && !node.__left)
+			{
+				node.__left = true;
+				node.otMouseLeave(event);
+				break;
+			}
+
+			node = node.parentNode;
+		}
+	});
+
+	document.addEventListener('mouseover', function(event)
+	{
+		let node = event.target;
+
+		while(node && node !== document)
+		{
+			if('otMouseLeave' in node && node.__left)
+			{
+				node.__left = false;
+			}
+
+			node = node.parentNode;
+		}
+	});
+});

package/{lib/items/directives → addons/render/directives/front/items/self}/650-fetch.js

@@ -20,7 +20,6 @@ directives.ItemAdd({
 	},
 	code: function(data, item, compile, node, identifier)
 	{
-		const onetype = item.GetOneType();
 		const config = {};
 		const methods = {};
 
@@ -122,7 +121,7 @@ directives.ItemAdd({
 		{
 			if(!response.ok)
 			{
-				throw new Error(`HTTP ${response.status}`);
+				throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
 			}
 
 			return response.json();
@@ -157,7 +156,7 @@ directives.ItemAdd({
 			state.loading = false;
 			state.success = false;
 
-			console.error('Fetch error:', err);
+			onetype.Error(500, 'Fetch error.', {bind: config.bind});
 
 			if(config.onError)
 			{

package/{lib/items/directives → addons/render/directives/front/items/self}/660-form.js

@@ -25,7 +25,6 @@ directives.ItemAdd({
 	},
 	code: function(data, item, compile, node, identifier)
 	{
-		const onetype = item.GetOneType();
 		const config = {};
 		const methods = {};
 
@@ -218,7 +217,7 @@ directives.ItemAdd({
 
 			if(!response.ok)
 			{
-				throw new Error(`HTTP ${response.status}`);
+				throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
 			}
 
 			return response.json();
@@ -233,7 +232,7 @@ directives.ItemAdd({
 
 			if(config.redirect)
 			{
-				pages.Fn('change', config.redirect, {}, { path: true });
+				onetype.AddonGet('pages')?.Fn('change', null, config.redirect);
 				return;
 			}
 
@@ -247,7 +246,7 @@ directives.ItemAdd({
 				}
 			}
 
-			onetype.Emit('form.success', {
+			onetype.Emit('@form.success', {
 				bind: config.bind,
 				response: compile.data[config.bind].response
 			});
@@ -255,7 +254,7 @@ directives.ItemAdd({
 
 		methods.error = (err) =>
 		{
-			console.error('Form submit error:', err);
+			onetype.Error(500, 'Form submit error.', {bind: config.bind});
 
 			if(config.onError)
 			{
@@ -267,7 +266,7 @@ directives.ItemAdd({
 				}
 			}
 
-			onetype.Emit('form.error', {
+			onetype.Emit('@form.error', {
 				bind: config.bind,
 				error: err.message
 			});

package/addons/render/{elements/front/items/directives → directives/front/items/self}/element.js

@@ -1,7 +1,7 @@
 onetype.AddonReady('directives', (directives) =>
 {
 	directives.ItemAdd({
-		id: 'jt-element',
+		id: 'ot-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.',
@@ -61,10 +61,16 @@ onetype.AddonReady('directives', (directives) =>
 				});
 			}
 
+			const key = attributes.wrapper['ot-key'] || attributes.data['ot-key'] || identifier;
+
+			delete attributes.wrapper['ot-key'];
+			delete attributes.data['ot-key'];
+
 			const render = onetype.Addon('elements').Render(elementName, attributes.data, attributes.wrapper, slots);
 
 			if(render)
 			{
+				render.Element.__otExternal = { render, name: elementName, key, data: attributes.data };
 				node.replaceWith(render.Element);
 			}
 			else