divhunt 2.0.0

package/addons/render/directives/front/js/items/100-if.js

@@ -0,0 +1,24 @@
+directives.ItemAdd({
+    id: 'dh-if',
+    icon: 'rule',
+    name: 'If',
+    description: 'Conditionally render elements based on expressions. Removes elements from DOM when condition is false.',
+    category: 'control-flow',
+    trigger: 'node',
+    order: 100,
+    strict: false,
+    attributes: {
+        'dh-if': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const expression = data['dh-if'].value;
+        const result = divhunt.Function(expression, compile.data, false);
+
+        if (!result)
+        {
+            node.remove();
+            return false;
+        }
+    }
+});

package/addons/render/directives/front/js/items/1000-render.js

@@ -0,0 +1,36 @@
+directives.ItemAdd({
+	id: 'dh-render',
+	icon: 'code',
+	name: 'Render',
+	description: 'Render components or elements into the DOM. Use <render name="property"> to inject render instances from the parent context.',
+    category: 'content',
+	trigger: 'node',
+	order: 1000,
+	tag: 'render',
+	attributes: {
+		'name': ['string']
+	},
+	code: function(data, item, compile, node)
+	{
+		const name = data['name'].value;
+
+		if(!name)
+		{
+			console.error('Render directive requires a name attribute');
+			node.remove();
+			return false;
+		}
+
+		if(item[name] && item[name].Element)
+		{
+			node.replaceWith(item[name].Element);
+		}
+		else
+		{
+			console.warn(`Render property "${name}" not found or is not a render instance`);
+			node.remove();
+		}
+
+		return false;
+	}
+});

package/addons/render/directives/front/js/items/110-show.js

@@ -0,0 +1,25 @@
+directives.ItemAdd({
+    id: 'dh-show',
+    icon: 'visibility',
+    name: 'Show',
+    description: 'Toggle element visibility with CSS display property. Hides elements when condition is false without removing from DOM.',
+    category: 'control-flow',
+    trigger: 'node',
+    order: 110,
+    attributes: {
+        'dh-show': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const originalDisplay = node.style.display || '';
+
+        if (!divhunt.Function(data['dh-show'].value, compile.data, false))
+        {
+            node.style.display = 'none';
+        }
+        else if (node.style.display === 'none')
+        {
+            node.style.display = originalDisplay;
+        }
+    }
+});

package/addons/render/directives/front/js/items/160-slot.js

@@ -0,0 +1,32 @@
+directives.ItemAdd({
+    id: 'dh-slot',
+    icon: 'input',
+    name: 'Slot',
+    description: 'Insert slot content. Supports DOM elements and render instances.',
+    category: 'content',
+    trigger: 'node',
+    order: 160,
+    tag: 'slot',
+    attributes: {
+        'name': ['string']
+    },
+    code: function(data, item, compile, node, id)
+    {
+        const name = data['name']?.value || 'default';
+        const slot = item.Slots[name];
+
+        if (slot && slot.Element)
+        {
+            node.replaceWith(slot.Element);
+        }
+        else if (slot && slot.html && slot.data)
+        {
+            const compiled = item.Compile(slot.html, slot.data);
+            node.replaceWith(compiled.element);
+        }
+        else
+        {
+            node.remove();
+        }
+    }
+});

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

@@ -0,0 +1,79 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-for': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const expression = data['dh-for'].value;
+        const match = expression.match(/(\w+)(?:\s*,\s*(\w+))?\s+in\s+(.+)/);
+
+        if (!match)
+        {
+            console.error(`Invalid dh-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 = divhunt.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(`dh-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);
+
+                while(compiled.element.firstChild)
+                {
+                    fragment.appendChild(compiled.element.firstChild);
+                }
+            });
+
+            node.before(fragment);
+            node.remove();
+        }
+        catch (error)
+        {
+            console.error(`Error in dh-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: 'dh-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: {
+        'dh-blur': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-blur'].value;
+
+        node.dhBlur = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('blur', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhBlur' in node)
+            {
+                node.dhBlur(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-change': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-change'].value;
+
+        node.dhChange = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['dh-change'].modifiers && data['dh-change'].modifiers.length > 0)
+            {
+                if (data['dh-change'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['dh-change'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value;
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('change', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhChange' in node)
+            {
+                node.dhChange(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,50 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-click-outside': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-click-outside'].value;
+
+        const handler = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        };
+
+        handlers.add({element: node, handler});
+    }
+});
+
+divhunt.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 @@
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('click', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhClick' in node)
+            {
+                node.dhClick(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    directives.ItemAdd({
+        id: 'dh-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: {
+            'dh-click': ['string']
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            const attribute = data['dh-click'].value;
+
+            node.dhClick = (event) =>
+            {
+                // Auto-apply modifiers
+                if (data['dh-click'].modifiers && data['dh-click'].modifiers.length > 0)
+                {
+                    if (data['dh-click'].modifiers.includes('prevent')) event.preventDefault();
+                    if (data['dh-click'].modifiers.includes('stop')) event.stopPropagation();
+                }
+
+                const results = divhunt.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: 'dh-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: {
+        'dh-double-click': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-double-click'].value;
+
+        node.dhDoubleClick = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['dh-double-click'].modifiers && data['dh-double-click'].modifiers.length > 0)
+            {
+                if (data['dh-double-click'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['dh-double-click'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('dblclick', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhDoubleClick' in node)
+            {
+                node.dhDoubleClick(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,46 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-focus': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-focus'].value;
+
+        node.dhFocus = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('focus', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhFocus' in node)
+            {
+                node.dhFocus(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

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

@@ -0,0 +1,46 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-input': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-input'].value;
+
+        node.dhInput = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if (typeof results === 'function')
+            {
+                const value = event.target.value;
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('input', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhInput' in node)
+            {
+                node.dhInput(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-keydown': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-keydown'].value;
+
+        node.dhKeydown = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['dh-keydown'].modifiers && data['dh-keydown'].modifiers.length > 0)
+            {
+                if (data['dh-keydown'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['dh-keydown'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('keydown', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhKeydown' in node)
+            {
+                node.dhKeydown(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,53 @@
+directives.ItemAdd({
+    id: 'dh-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: {
+        'dh-keyup': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-keyup'].value;
+
+        node.dhKeyup = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data['dh-keyup'].modifiers && data['dh-keyup'].modifiers.length > 0)
+            {
+                if (data['dh-keyup'].modifiers.includes('prevent')) event.preventDefault();
+                if (data['dh-keyup'].modifiers.includes('stop')) event.stopPropagation();
+            }
+
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                const value = event.target.value || '';
+                results(event, {item, compile, node, identifier, value});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('keyup', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhKeyup' in node)
+            {
+                node.dhKeyup(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});