Config Engine

Initialise multiple components at once with a single configuration object.

// Initialise components declaratively
$.setup({
    // Selector: configuration
    '#my-modal': {
        component: 'modal',
        options: { backdrop: true, keyboard: true }
    },

    '.product-card': {
        component: 'card',
        options: { hover: true }
    },

    '#main-tabs': {
        component: 'tabs',
        options: { animation: true, activeIndex: 0 }
    }
});

Supported Components (16 total)

→ View complete component reference with live demos

Bind event handlers directly in configuration using inline functions or action objects.

$.setup({
    // Inline function handler
    '#submit-btn': {
        events: {
            click: (e, $el) => {
                e.preventDefault();
                $el.text('Submitted!');
            }
        }
    },

    // Multiple events
    '#search-input': {
        events: {
            focus: (e, $el) => $el.addClass('focused'),
            blur: (e, $el) => $el.removeClass('focused'),
            input: (e, $el) => console.log($el.val())
        }
    },

    // Action objects for declarative changes
    '#theme-toggle': {
        events: {
            click: [
                { toggleClass: 'active' },
                { target: 'body', toggleClass: 'dm-theme-dark' }
            ]
        }
    }
});

Set initial properties like CSS, text, HTML, classes, and attributes.

$.setup({
    '#welcome-message': {
        initial: {
            text: 'Welcome to Domma!',
            css: { color: 'var(--dm-primary)', fontWeight: 'bold' },
            addClass: 'animated fadeIn'
        }
    },

    '#status-badge': {
        initial: {
            html: 'Online',
            attr: { 'data-status': 'online', 'aria-label': 'Status' }
        }
    },

    '.disabled-section': {
        initial: {
            addClass: 'opacity-50',
            attr: { 'aria-disabled': 'true' }
        }
    }
});

Available Properties

Modify configuration after initialisation with $.update(). Changes are deep-merged.

// Initial setup
$.setup({
    '#my-modal': {
        component: 'modal',
        options: { backdrop: true, keyboard: true }
    }
});

// Later: update options
$.update('#my-modal', {
    options: { backdrop: false }  // backdrop changed, keyboard preserved
});

// Add new event handlers
$.update('#my-modal', {
    events: {
        click: () => console.log('Modal clicked')
    }
});

// Update initial state
$.update('#status', {
    initial: {
        text: 'Updated status',
        addClass: 'pulse'
    }
});

Retrieve current configuration for debugging or dynamic adjustments.

// Get config for specific selector
const modalConfig = $.config('#my-modal');
console.log(modalConfig);
// { component: 'modal', options: { backdrop: true, keyboard: true } }

// Get all configurations
const allConfigs = $.config();
console.log(allConfigs);
// { '#my-modal': {...}, '.card': {...}, ... }

Reset configuration, destroy components, and unbind events with $.reset().

// Reset specific selector
$.reset('#my-modal');
// - Destroys the modal component
// - Unbinds all event handlers
// - Clears stored configuration

// Reset ALL configurations
$.reset();
// Resets every selector that was configured

A complete form with validation, dynamic UI, and component integration.

$.setup({
    // Form validation and submission
    '#contact-form': {
        events: {
            submit: (e, $form) => {
                e.preventDefault();
                const data = {
                    name: $('#name').val(),
                    email: $('#email').val()
                };

                // Show loading state
                $('#submit-btn').text('Sending...').attr('disabled', true);

                // Simulate API call
                setTimeout(() => {
                    // Show success toast (better UX for transient feedback)
                    Domma.elements.toast('Message sent successfully!', {
                        type: 'success',
                        duration: 3000
                    });

                    // Reset form and button
                    $form[0].reset();
                    $('#email').removeClass('success error');
                    $('#submit-btn').text('Send Message').attr('disabled', false);
                }, 1500);
            }
        }
    },

    // Input validation on blur
    '#email': {
        events: {
            blur: (e, $el) => {
                const valid = $el.val().includes('@');
                $el.removeClass('success error')
                   .addClass(valid ? 'success' : 'error');
            }
        }
    }
});