All Config Engine Components

Complete reference of the 16 components that support $.setup() configuration

Quick Reference

Supported Components (16): Can be configured via $.setup()

card

modal

tabs

accordion

tooltip

carousel

dropdown

badge

backToTop

buttonGroup

loader

breadcrumbs

navbar

notification

timer

alarm

Not Supported (9): Must use direct initialisation

autocomplete

pillbox

toast

dialog

treeView

hero

themeRoller

pageRoller

editor

Supported 1. card

Purpose: Interactive container elements with hover effects and click handling

$.setup({
  '.demo-card': {
    component: 'card',
    options: {
      hoverable: true,
      shadow: 'medium',
      onClick: () => console.log('Card clicked!')
    }
  }
});

Supported 1. card

Product 1

Hover or click me!

Product 2

Hover or click me!

Product 3

Hover or click me!

<div class="grid grid-cols-3 gap-4">
    <div class="card demo-card demo-card-hover" style="cursor: pointer;">
        <div class="card-body">
            <h4>Product 1</h4>
            <p class="text-sm text-muted">Hover or click me!</p>
        </div>
    </div>
    <div class="card demo-card demo-card-hover" style="cursor: pointer;">
        <div class="card-body">
            <h4>Product 2</h4>
            <p class="text-sm text-muted">Hover or click me!</p>
        </div>
    </div>
    <div class="card demo-card demo-card-hover" style="cursor: pointer;">
        <div class="card-body">
            <h4>Product 3</h4>
            <p class="text-sm text-muted">Hover or click me!</p>
        </div>
    </div>
</div>

Supported 2. modal

Purpose: Dialog overlays with backdrop, keyboard support, and animations

$.setup({
  '#demo-modal': {
    component: 'modal',
    options: {
      backdrop: true,
      backdropClose: true,
      keyboard: true,
      animation: 'fade'
    }
  }
});

Supported 2. modal

<button type="button" id="open-modal-btn" class="btn btn-primary">Open Modal</button>

<div id="demo-modal" class="modal">
    <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="modal-close">×</button>
    </div>
    <div class="modal-body">
        <p>This modal was configured via $.setup()</p>
        <p class="text-muted">Press ESC or click backdrop to close</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn modal-close">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
    </div>
</div>

/**
 * Supported 2. modal - from public/showcase/config/all-components.
 */
export function mount(root) {
    $.setup({
      // 1. Card
      '.demo-card': {
        component: 'card',
        options: {
          hoverable: true,
          onClick: function () {
            E.toast('Card clicked!', {type: 'info', duration: 2000});
          }
        }
      },

      // 2. Modal
      '#demo-modal': {
        component: 'modal',
        options: {
          backdrop: true,
          backdropClose: true,
          keyboard: true,
          animation: 'fade'
        }
      },
      '#open-modal-btn': {
        events: {
          click: () => {
            // $.setup() keeps instances internally - reach them with $.getComponent()
            const modal = $.getComponent('#demo-modal');
            if (modal) modal.open();
          }
        }
      },

      // 3. Tabs
      '#demo-tabs': {
        component: 'tabs',
        options: {
          activeIndex: 0,
          animation: 'fade'
        }
      },

      // 4. Accordion
      '#demo-accordion': {
        component: 'accordion',
        options: {
          multiExpand: false,
          animation: 'slide',
          activeIndex: 0
        }
      },

      // 5. Tooltip
      '[data-tooltip]': {
        component: 'tooltip',
        options: {
          trigger: 'hover',
          delay: 200
        }
      },

      // 6. Carousel
      '#demo-carousel': {
        component: 'carousel',
        options: {
          autoplay: true,
          interval: 3000,
          loop: true,
          showArrows: true,
          showIndicators: true
        }
      },

      // 7. Dropdown
      '#demo-dropdown': {
        component: 'dropdown',
        options: {
          items: [
            {text: 'Edit', value: 'edit'},
            {text: 'Duplicate', value: 'duplicate'},
            {divider: true},
            {text: 'Delete', value: 'delete', class: 'text-danger'}
          ],
          placement: 'bottom',
          closeOnSelect: true
        }
      },

      // 10. Button Group
      '#demo-btngroup': {
        component: 'buttonGroup',
        options: {
          mode: 'single',
          activeClass: 'active',
          onChange: (value) => {
            const labels = ['Left', 'Center', 'Right', 'Justify'];
            $(root).find('#btngroup-result').text(labels[value]);
          }
        }
      },

      // 11. Loader
      '#show-loader-btn': {
        events: {
          click: () => {
            const loader = E.loader(root.querySelector('#demo-loader-container'), {
              type: 'spinner',
              overlay: true,
              text: 'Loading...'
            });
            loader.show();
            setTimeout(() => loader.hide(), 3000);
          }
        }
      },

      // 12. Breadcrumbs
      '#demo-breadcrumbs': {
        component: 'breadcrumbs',
        options: {
          items: [
            {text: 'Home', url: '#'},
            {text: 'Showcase', url: '#'},
            {text: 'Config Engine', url: '#'},
            {text: 'All Components', active: true}
          ],
          separator: '/'
        }
      },

      // 13. Navbar
      '#demo-navbar': {
        component: 'navbar',
        options: {
          brand: {text: 'Domma', url: '#'},
          items: [
            {text: 'Home', url: '#', active: true},
            {text: 'Docs', url: '#'},
            {text: 'Examples', url: '#'}
          ],
          variant: 'light'
        }
      },

      // 14. Notification
      '#request-notification-btn': {
        events: {
          click: async () => {
            if ('Notification' in window) {
              const permission = await Notification.requestPermission();
              if (permission === 'granted') {
                E.notify('Domma Notification', {
                  body: 'This is a desktop notification configured via $.setup()!',
                  icon: '../../assets/logo/domma-icon.svg'
                });
              }
            } else {
              E.toast('Notifications not supported', {type: 'error'});
            }
          }
        }
      },

      // 15. Timer
      '#demo-timer': {
        component: 'timer',
        options: {
          duration: 60000,
          format: 'mm:ss',
          showControls: true,
          autoStart: false
        }
      }
    });
}

Supported 3. tabs

Purpose: Tabbed content panels with animation support

$.setup({
  '#demo-tabs': {
    component: 'tabs',
    options: {
      activeIndex: 0,
      animation: 'fade'
    }
  }
});

Supported 3. tabs

Product Overview

This is the overview content. Configured tabs automatically handle switching.

Technical Specifications

Detailed specifications appear in this tab panel.

Customer Reviews

Reviews and ratings are displayed here.

<div id="demo-tabs" class="tabs">
    <div class="tab-list" role="tablist">
        <button type="button" class="tab-item active" role="tab">Overview</button>
        <button type="button" class="tab-item" role="tab">Specifications</button>
        <button type="button" class="tab-item" role="tab">Reviews</button>
    </div>
    <div class="tab-content">
        <div class="tab-panel active" role="tabpanel">
            <h4>Product Overview</h4>
            <p>This is the overview content. Configured tabs automatically handle switching.</p>
        </div>
        <div class="tab-panel" role="tabpanel">
            <h4>Technical Specifications</h4>
            <p>Detailed specifications appear in this tab panel.</p>
        </div>
        <div class="tab-panel" role="tabpanel">
            <h4>Customer Reviews</h4>
            <p>Reviews and ratings are displayed here.</p>
        </div>
    </div>
</div>

Supported 4. accordion

Purpose: Collapsible content sections with single or multi-expand modes

$.setup({
  '#demo-accordion': {
    component: 'accordion',
    options: {
      multiExpand: false,
      animation: 'slide'
    }
  }
});

Supported 4. accordion

What is Domma? ▼

Domma is a lightweight JavaScript framework combining jQuery-style DOM manipulation with modern UI components.

How do I install it? ▼

Include the CDN link or npm install domma-framework

Is it production-ready? ▼

Yes! Domma is stable and used in production applications.

<div id="demo-accordion" class="accordion">
    <div class="accordion-item active">
        <div class="accordion-header">
            <span>What is Domma?</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">
                <p>Domma is a lightweight JavaScript framework combining jQuery-style DOM manipulation with modern UI
                    components.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>How do I install it?</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">
                <p>Include the CDN link or npm install domma-framework</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Is it production-ready?</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">
                <p>Yes! Domma is stable and used in production applications.</p>
            </div>
        </div>
    </div>
</div>

Supported 5. tooltip

Purpose: Contextual popups on hover or click with multiple positioning options

$.setup({
  '[data-tooltip]': {
    component: 'tooltip',
    options: {
      position: 'top',
      trigger: 'hover',
      delay: 200
    }
  }
});

Supported 5. tooltip

<div class="flex gap-4">
    <button type="button" class="btn btn-primary" data-tooltip="This appears on top!" data-tooltip-position="top">Top Tooltip
    </button>
    <button type="button" class="btn btn-primary" data-tooltip="This appears on the right!" data-tooltip-position="right">Right
        Tooltip
    </button>
    <button type="button" class="btn btn-primary" data-tooltip="This appears on the bottom!" data-tooltip-position="bottom">
        Bottom Tooltip
    </button>
    <button type="button" class="btn btn-primary" data-tooltip="This appears on the left!" data-tooltip-position="left">Left
        Tooltip
    </button>
</div>

Supported 6. carousel

Purpose: Image/content slider with autoplay, indicators, and navigation arrows

$.setup({
  '#demo-carousel': {
    component: 'carousel',
    options: {
      autoplay: true,
      interval: 3000,
      loop: true,
      showArrows: true,
      showIndicators: true
    }
  }
});

Supported 6. carousel

Slide 1

Slide 2

Slide 3

<div id="demo-carousel" class="carousel" style="max-width: 600px; margin: 0 auto;">
    <div class="carousel-track">
        <div class="carousel-slide" style="height: 300px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; border-radius: 8px;">
            Slide 1
        </div>
        <div class="carousel-slide" style="height: 300px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; border-radius: 8px;">
            Slide 2
        </div>
        <div class="carousel-slide" style="height: 300px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; border-radius: 8px;">
            Slide 3
        </div>
    </div>
</div>

Supported 7. dropdown

Purpose: Dropdown menus with positioning and selection handling

$.setup({
  '#demo-dropdown': {
    component: 'dropdown',
    options: {
      items: [
        { text: 'Edit', value: 'edit' },
        { text: 'Duplicate', value: 'duplicate' },
        { divider: true },
        { text: 'Delete', value: 'delete', class: 'text-danger' }
      ],
      placement: 'bottom',
      closeOnSelect: true
    }
  }
});

Supported 7. dropdown

<button type="button" class="btn btn-primary" id="demo-dropdown">Actions</button>

Supported 8. badge

Purpose: Status indicators and labels with variant styles

$.setup({
  '.demo-badge': {
    component: 'badge',
    options: {
      variant: 'primary',
      rounded: true
    }
  }
});

Supported 8. badge

Primary Secondary Success Danger Warning Info

<div class="flex gap-2 flex-wrap">
    <span class="badge badge-primary demo-badge">Primary</span>
    <span class="badge badge-secondary demo-badge">Secondary</span>
    <span class="badge badge-success demo-badge">Success</span>
    <span class="badge badge-danger demo-badge">Danger</span>
    <span class="badge badge-warning demo-badge">Warning</span>
    <span class="badge badge-info demo-badge">Info</span>
</div>

Supported 9. backToTop

Purpose: Scroll-to-top button that appears after scrolling down

$.setup({
  '#back-to-top': {
    component: 'backToTop',
    options: {
      showAfter: 300,
      duration: 500,
      position: 'bottom-right'
    }
  }
});

Supported 9. backToTop

Note: Scroll down the page to see the back-to-top button appear in the bottom-right corner.

<p class="text-muted"><strong>Note:</strong> Scroll down the page to see the back-to-top button appear in the
    bottom-right corner.</p>
<button type="button" id="demo-backtotop-btn" class="btn btn-sm btn-primary" style="position: fixed; bottom: 20px; right: 20px; display: none;">
    ↑ Top
</button>

/**
 * Supported 9. backToTop - from public/showcase/config/all-components.
 */
export function mount(root) {
      // Back to top button demo (manual show/hide based on scroll)
    // The window is not a Domma collection, so its listener is added (and removed) directly.
    let scrollTimeout;
    const onScroll = () => {
        clearTimeout(scrollTimeout);
        const btn = $(root).find('#demo-backtotop-btn');

        if (window.scrollY > 300) {
          btn.show();
        } else {
          scrollTimeout = setTimeout(() => btn.hide(), 100);
        }
      };
    window.addEventListener('scroll', onScroll, {passive: true});
    $(root).find('#demo-backtotop-btn').on('click', () => {
        window.scrollTo({top: 0, behavior: 'smooth'});
      });

    return () => { window.removeEventListener('scroll', onScroll); clearTimeout(scrollTimeout); };
}

Supported 10. buttonGroup

Purpose: Radio/checkbox style button groups with single or multi-select

$.setup({
  '#demo-btngroup': {
    component: 'buttonGroup',
    options: {
      mode: 'single',  // or 'multiple'
      activeClass: 'active'
    }
  }
});

Supported 10. buttonGroup

Selected: Left

<div class="btn-group" id="demo-btngroup">
    <button type="button" class="btn active">Left</button>
    <button type="button" class="btn">Center</button>
    <button type="button" class="btn">Right</button>
    <button type="button" class="btn">Justify</button>
</div>
<p class="mt-3 text-muted">Selected: <span id="btngroup-result">Left</span></p>

Supported 11. loader

Purpose: Loading indicators with multiple animation types

$.setup({
  '#demo-loader-container': {
    component: 'loader',
    options: {
      type: 'spinner',
      size: 'medium',
      overlay: true,
      text: 'Loading...'
    }
  }
});

Supported 11. loader

Content area - click button to show loader overlay

<button type="button" id="show-loader-btn" class="btn btn-primary">Show Loader</button>
<div id="demo-loader-container" style="position: relative; min-height: 200px; background: white; border-radius: 8px; margin-top: 1rem; display: flex; align-items: center; justify-content: center;">
    <p>Content area - click button to show loader overlay</p>
</div>

Supported 12. breadcrumbs

Purpose: Navigation trail showing current page location

$.setup({
  '#demo-breadcrumbs': {
    component: 'breadcrumbs',
    options: {
      items: [
        {text: 'Home', url: '#'},
        {text: 'Showcase', url: '#'},
        {text: 'Config Engine', active: true}
      ],
      separator: '/'
    }
  }
});

Supported 12. breadcrumbs

<div class="breadcrumb-container">
    <nav id="demo-breadcrumbs" class="breadcrumb"></nav>
</div>

Supported 13. navbar

Purpose: Responsive navigation bar with brand, menu items, and actions

$.setup({
  '#demo-navbar': {
    component: 'navbar',
    options: {
      brand: {text: 'Domma', url: '#'},
      items: [
        {text: 'Home', url: '#', active: true},
        {text: 'Docs', url: '#'},
        {text: 'Examples', url: '#'}
      ],
      variant: 'light'
    }
  }
});

Supported 13. navbar

<nav id="demo-navbar" class="navbar"></nav>

Supported 14. notification

Purpose: Desktop browser notifications (requires permission)

$.setup({
  '#request-notification-btn': {
    events: {
      click: async () => {
        if ('Notification' in window) {
          const permission = await Notification.requestPermission();
          if (permission === 'granted') {
            Domma.elements.notify('Domma Notification', {
              body: 'Desktop notification configured via $.setup()!',
              icon: '../../assets/logo/domma-icon.svg'
            });
          }
        }
      }
    }
  }
});

Supported 14. notification

Note: Browser will prompt for permission to show notifications.

<button type="button" id="request-notification-btn" class="btn btn-primary">Request Permission &amp; Show Notification</button>
<p class="mt-3 text-muted"><strong>Note:</strong> Browser will prompt for permission to show notifications.</p>

Supported 15. timer

Purpose: Countdown timer with optional visual display and controls

$.setup({
  '#demo-timer': {
    component: 'timer',
    options: {
      duration: 60000,  // 60 seconds
      format: 'mm:ss',
      showControls: true,
      autoStart: false
    }
  }
});

Supported 15. timer

<div id="demo-timer"></div>

Supported 16. alarm

Purpose: Scheduled time-based alerts with localStorage persistence

$.setup({
  '#demo-alarm': {
    component: 'alarm',
    options: {
      alarms: [
        {
          time: '09:00',
          label: 'Morning Meeting',
          repeat: 'weekdays',
          enabled: true
        }
      ],
      storageKey: 'demo-alarms'
    }
  }
});

Supported 16. alarm

Alarm Configuration: Alarms are configured via options and persist in localStorage. When an alarm triggers, a desktop notification and optional sound are displayed.

Current Time: --:--
    Next Alarm: Morning Meeting at 09:00 (weekdays)

<div class="alert alert-info">
    <strong>Alarm Configuration:</strong> Alarms are configured via options and persist in localStorage.
    When an alarm triggers, a desktop notification and optional sound are displayed.
</div>
<pre class="code-block">Current Time: <span id="current-time">--:--</span>
    Next Alarm: Morning Meeting at 09:00 (weekdays)
</pre>

/**
 * Supported 16. alarm - from public/showcase/config/all-components.
 */
export function mount(root) {
    // Update current time for alarm demo
    const showTime = () => $(root).find('#current-time').text(D().format('HH:mm'));
    showTime();
    const clock = setInterval(showTime, 1000);

    return () => clearInterval(clock);
}

Not Supported Components Requiring Direct Init

These components cannot be configured via $.setup() and must be initialized directly.

autocomplete

Why: Complex data binding and async data sources

// Use direct init
const ac = Domma.elements.autocomplete('#search', {
  data: ['Apple', 'Banana', 'Cherry'],
  onSelect: (val) => console.log(val)
});

pillbox

Why: Advanced multi-select state management

// Use direct init
const pb = Domma.elements.pillbox('#tags', {
  data: ['React', 'Vue', 'Angular'],
  creatable: true
});

toast

Why: Ephemeral notifications (no persistent DOM element)

// Use static method
Domma.elements.toast('Success!', {
  type: 'success',
  duration: 3000
});

dialog (alert, confirm, prompt)

Why: Promise-based programmatic APIs

// Use static methods
const ok = await Domma.elements.confirm('Delete?');
const name = await Domma.elements.prompt('Name:');

treeView

Why: Hierarchical data requires direct data binding

// Use direct init
const tree = Domma.elements.treeView('#tree', {
  items: [{label: 'Parent', children: [...]}]
});

hero

Why: CSS-only component (no JavaScript)

  Hero Section

themeRoller / pageRoller / editor

Why: Developer tools (in tools bundle, not main bundle)

// Load domma-tools.min.js first
const roller = Domma.elements.themeRoller('#container');
const editor = Domma.elements.editor('#editor');

When to Use Config Engine vs. Direct Init

✓ Use $.setup() for:

Static component initialisation
Multiple similar components
Simple setup scenarios
Layout-based components
Components with persistent DOM elements
Declarative configuration approach

✓ Use Direct Init for:

Dynamic data sources
Complex interactions
Conditional setup logic
Ephemeral/temporary components
Promise-based workflows
Components requiring runtime data