@onetype/framework 2.0.20

package/addons/render/directives/front/js/items/200-for.js

@@ -0,0 +1,87 @@
+directives.ItemAdd({
+    id: 'ot-for',
+    icon: 'repeat',
+    name: 'For',
+    description: 'Loop through arrays and objects to render multiple elements. Supports item and index variables for complex iterations.',
+    category: 'control-flow',
+    trigger: 'node',
+    order: 200,
+    attributes: {
+        'ot-for': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const expression = data['ot-for'].value;
+        const match = expression.match(/(\w+)(?:\s*,\s*(\w+))?\s+in\s+(.+)/);
+
+        if (!match)
+        {
+            console.error(`Invalid ot-for syntax: ${expression}. Expected format: "item in items" or "item, index in items"`);
+            return;
+        }
+
+        const originalChildren = compile.children;
+        compile.children = false;
+
+        const forName = match[1];
+        const forIndex = match[2] || forName + '_index';
+        const forExpression = match[3];
+
+        try
+        {
+            let items = onetype.Function(forExpression, compile.data, false);
+
+            if (!Array.isArray(items) && items && typeof items === 'object')
+            {
+                if (items[Symbol.iterator])
+                {
+                    items = Array.from(items);
+                }
+                else
+                {
+                    items = Object.entries(items);
+                }
+            }
+            else if (!Array.isArray(items))
+            {
+                throw(`ot-for expects an array or iterable, got: ${typeof items}`);
+            }
+
+            const html = node.outerHTML;
+            const fragment = document.createDocumentFragment();
+
+            items.forEach((value, index) =>
+            {
+                const loopData = Object.assign({}, compile.data);
+                loopData[forName] = value;
+                loopData[forIndex] = index;
+
+                const compiled = item.Compile(html, loopData);
+                const key = onetype.GenerateHash(index + ':' + (typeof value === 'object' ? JSON.stringify(value) : String(value)));
+
+                while(compiled.element.firstChild)
+                {
+                    const child = compiled.element.firstChild;
+
+                    if(child.nodeType === Node.ELEMENT_NODE)
+                    {
+                        child.setAttribute('ot-key', key);
+                    }
+
+                    fragment.appendChild(child);
+                }
+            });
+
+            node.before(fragment);
+            node.remove();
+        }
+        catch (error)
+        {
+            console.error(`Error in ot-for directive for "${expression}":`, error);
+        }
+        finally
+        {
+            compile.children = originalChildren;
+        }
+    }
+});

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

@@ -0,0 +1,46 @@
+directives.ItemAdd({
+    id: 'ot-blur',
+    icon: 'visibility_off',
+    name: 'Blur',
+    description: 'Handle blur events when elements lose focus. Useful for form validation and input state management.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-blur': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-blur'].value;
+
+        node.otBlur = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('blur', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otBlur' in node)
+            {
+                node.otBlur(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'ot-change',
+    icon: 'sync_alt',
+    name: 'Change',
+    description: 'Handle change events when form fields lose focus. Triggers after value is committed with modifiers support.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-change': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-change'].value;
+
+        node.otChange = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['ot-change'].modifiers && data['ot-change'].modifiers.length > 0)
+            {
+                if (data['ot-change'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['ot-change'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value;
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('change', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otChange' in node)
+            {
+                node.otChange(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,50 @@
+directives.ItemAdd({
+    id: 'ot-click-outside',
+    icon: 'close_fullscreen',
+    name: 'Click Outside',
+    description: 'Detect clicks outside the element. Perfect for closing dropdowns and modals.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-click-outside': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-click-outside'].value;
+
+        const handler = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        };
+
+        handlers.add({element: node, handler});
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    const handlers = new Set();
+
+    document.addEventListener('click', function(event)
+    {
+        handlers.forEach(({element, handler}) =>
+        {
+            if(!document.contains(element))
+            {
+                handlers.delete({element, handler});
+                return;
+            }
+
+            if(!element.contains(event.target) && element !== event.target)
+            {
+                handler(event);
+            }
+        });
+    });
+});

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

@@ -0,0 +1,52 @@
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('click', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otClick' in node)
+            {
+                node.otClick(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    directives.ItemAdd({
+        id: 'ot-click',
+        icon: 'touch_app',
+        name: 'Click',
+        description: 'Handle click events with support for prevent and stop modifiers. Executes functions on element clicks.',
+        category: 'events',
+        trigger: 'node',
+        order: 500,
+        attributes: {
+            'ot-click': ['string']
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            const attribute = data['ot-click'].value;
+
+            node.otClick = (event) =>
+            {
+                // Auto-apply modifiers
+                if (data['ot-click'].modifiers && data['ot-click'].modifiers.length > 0)
+                {
+                    if (data['ot-click'].modifiers.includes('prevent')) event.preventDefault();
+                    if (data['ot-click'].modifiers.includes('stop')) event.stopPropagation();
+                }
+
+                const results = onetype.Function(attribute, compile.data, false);
+
+                if (typeof results === 'function')
+                {
+                    results(event, {item, compile, node, identifier});
+                }
+            }
+        }
+    });
+});

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

@@ -0,0 +1,52 @@
+directives.ItemAdd({
+    id: 'ot-double-click',
+    icon: 'ads_click',
+    name: 'Double Click',
+    description: 'Handle double-click events on elements. Enables advanced click interactions.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-double-click': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-double-click'].value;
+
+        node.otDoubleClick = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['ot-double-click'].modifiers && data['ot-double-click'].modifiers.length > 0)
+            {
+                if (data['ot-double-click'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['ot-double-click'].modifiers.includes('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('dblclick', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otDoubleClick' in node)
+            {
+                node.otDoubleClick(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,46 @@
+directives.ItemAdd({
+    id: 'ot-focus',
+    icon: 'center_focus_strong',
+    name: 'Focus',
+    description: 'Handle focus events when elements receive focus. Enables focus-based interactions and accessibility features.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-focus': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-focus'].value;
+
+        node.otFocus = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('focus', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otFocus' in node)
+            {
+                node.otFocus(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

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

@@ -0,0 +1,46 @@
+directives.ItemAdd({
+    id: 'ot-input',
+    icon: 'keyboard',
+    name: 'Input',
+    description: 'Handle input events for real-time form field updates. Captures value changes as user types.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-input': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-input'].value;
+
+        node.otInput = (event) =>
+        {
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if (typeof results === 'function')
+            {
+                const value = event.target.value;
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('input', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otInput' in node)
+            {
+                node.otInput(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'ot-keydown',
+    icon: 'keyboard_arrow_down',
+    name: 'Keydown',
+    description: 'Handle keydown events for keyboard shortcuts. Captures keys as they are pressed down.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-keydown': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-keydown'].value;
+
+        node.otKeydown = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['ot-keydown'].modifiers && data['ot-keydown'].modifiers.length > 0)
+            {
+                if (data['ot-keydown'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['ot-keydown'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('keydown', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otKeydown' in node)
+            {
+                node.otKeydown(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'ot-keyup',
+    icon: 'keyboard_arrow_up',
+    name: 'Keyup',
+    description: 'Handle keyup events for keyboard interactions. Detects when keys are released.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-keyup': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-keyup'].value;
+
+        node.otKeyup = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['ot-keyup'].modifiers && data['ot-keyup'].modifiers.length > 0)
+            {
+                if (data['ot-keyup'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['ot-keyup'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = onetype.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+onetype.AddonReady('directives', function()
+{
+    document.addEventListener('keyup', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otKeyup' in node)
+            {
+                node.otKeyup(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,61 @@
+directives.ItemAdd({
+    id: 'ot-mouse-enter',
+    icon: 'mouse',
+    name: 'Mouse Enter',
+    description: 'Handle mouse enter events. Triggers when cursor enters element boundaries.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-mouse-enter': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-mouse-enter'].value;
+
+        node.otMouseEnter = (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('mouseover', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otMouseEnter' in node && !node.otMouseEntered)
+            {
+                node.otMouseEntered = 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.otMouseEntered)
+            {
+                node.otMouseEntered = false;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,61 @@
+directives.ItemAdd({
+    id: 'ot-mouse-leave',
+    icon: 'logout',
+    name: 'Mouse Leave',
+    description: 'Handle mouse leave events. Triggers when cursor exits element boundaries.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'ot-mouse-leave': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['ot-mouse-leave'].value;
+
+        node.otMouseLeave = (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('mouseout', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otMouseLeave' in node && !node.otMouseLeft)
+            {
+                node.otMouseLeft = 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.otMouseLeft)
+            {
+                node.otMouseLeft = false;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});