API Reference

Every public Domma call, searchable - and a one-page cheat sheet

All calls

Search by name or description, sort by any column, or right-click the table to filter by module, group and export.

Cheat sheet

Domma Reference

Complete API cheat sheet for rapid development

Global Aliases

Quick access to all Domma functionality via global shortcuts

Core Aliases

$Domma()

_Domma.utils

MDomma.models

DDomma.dates()

SDomma.storage

DOM Manipulation

90+ jQuery-compatible methods for selecting, traversing, and manipulating DOM elements

Selectors

$('.class'), $('#id'), $('tag')
$(element), $('<div>new</div>')

$(selector) Select elements

$(selector, context) Select within context

$(element) Wrap element

$(html) Create elements

Traversal (22)

$('.item').parent().addClass('active')

find(selector) Find descendants

parent(), parents() Navigate up

children() Direct children

siblings() Siblings

next(), prev() Adjacent

first(), last(), eq() Position

filter(), not(), is() Filter

Content

$('#output').html('<b>Bold</b>')

html() Get/set HTML

text() Get/set text

val() Get/set value

Attributes

$('img').attr('src', 'image.jpg')

attr(), removeAttr() Attributes

prop(), removeProp() Properties

data(), removeData() Data attributes

CSS & Classes

$('.box').addClass('active').css('color', 'red')

addClass() Add classes

removeClass() Remove classes

toggleClass() Toggle classes

hasClass() Check class

css() Get/set styles

Events (22+)

$('.btn').on('click', handler)
$('.list').on('click', '.item', handler)

on(event, handler) Bind event

on(event, selector, handler) Delegate

off(), one() Remove, once

trigger() Fire event

click(), focus(), etc. Shortcuts

Utilities (_)

120+ Lodash-compatible utility functions for data manipulation

Array Methods

_.map([1,2,3], x => x * 2)
_.filter(users, u => u.active)

map, filter, reduce Transform

forEach, each Iterate

find, findIndex Search

sortBy, orderBy Sort

chunk, partition Split

Object Methods

_.pick(obj, ['name', 'age'])
_.groupBy(users, 'role')

keys, values, entries Access

pick, omit Select fields

merge, assign Combine

groupBy, countBy Group

String Methods

_.camelCase('hello world')
_.template('Hello {{name}}')(data)

camelCase, kebabCase Case

capitalize, upperFirst Format

template Templates

escape, unescape Safety

Function Methods

_.debounce(fn, 300)
_.throttle(fn, 100)

debounce Delay execution

throttle Limit frequency

once Execute once

memoize Cache results

Models (M)

Reactive data models with validation, computed properties, and pub/sub

Model Creation

const user = M.create({
name: 'John',
age: 30
})

M.create(data) Create model

M.extend(proto) Prototype

model.get(key) Get value

model.set(key, value) Set value

Reactivity

model.on('change:name', handler)
M.publish('topic', data)

model.on(event, handler) Listen changes

M.publish(topic, data) Publish

M.subscribe(topic, handler) Subscribe

Storage (S)

Enhanced localStorage wrapper with JSON support and fallbacks

Storage Operations

S.set('user', {name: 'John'})
const user = S.get('user')

S.set(key, value) Store data

S.get(key, default) Retrieve data

S.remove(key) Delete item

S.clear() Clear all

S.keys() List keys

UI Elements

19 pre-built UI components with consistent API

Core Elements

Domma.elements.modal('#my-modal')
Domma.elements.alert('Hello!')

modal, dialog Overlays

toast, alert Messages

tabs, accordion Containers

dropdown, tooltip Overlays

carousel, timeline Content

Quick Actions

Copy these common patterns for rapid development

Common Patterns

AJAX Form Submit

Dynamic List

Event Delegation

Modal Confirmation

<div class="hero hero-center bg-ambient-float-orbs">
    <div class="hero-content">
        <div class="hero-title">Domma Reference</div>
        <div class="hero-subtitle">Complete API cheat sheet for rapid development</div>
    </div>
</div>

<!-- Aliases Section -->
<div class="section-intro">
    <h2><span data-icon="star" class="icon"></span> Global Aliases</h2>
    <p>Quick access to all Domma functionality via global shortcuts</p>
</div>

<div class="reference-grid">
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="edit" class="icon"></span>
            <h3>Core Aliases</h3>
        </div>
        <div class="reference-body">
            <div class="method-item">
                <span><span class="alias-badge">$</span><span class="method-name">Domma()</span></span>
                <button type="button" class="copy-btn" data-copy="$('.selector')" title="Copy example">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span><span class="alias-badge">_</span><span class="method-name">Domma.utils</span></span>
                <button type="button" class="copy-btn" data-copy="_.map(array, fn)" title="Copy example">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span><span class="alias-badge">M</span><span class="method-name">Domma.models</span></span>
                <button type="button" class="copy-btn" data-copy="M.create({})" title="Copy example">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span><span class="alias-badge">D</span><span class="method-name">Domma.dates()</span></span>
                <button type="button" class="copy-btn" data-copy="D().format('YYYY-MM-DD')" title="Copy example">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span><span class="alias-badge">S</span><span class="method-name">Domma.storage</span></span>
                <button type="button" class="copy-btn" data-copy="S.set('key', value)" title="Copy example">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- DOM Methods Section -->
<div class="section-intro">
    <h2><span data-icon="layout" class="icon"></span> DOM Manipulation</h2>
    <p>90+ jQuery-compatible methods for selecting, traversing, and manipulating DOM elements</p>
</div>

<div class="reference-grid">
    <!-- Selectors -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="search" class="icon"></span>
            <h3>Selectors</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('.class'), $('#id'), $('tag')<br>$(element), $('&lt;div&gt;new&lt;/div&gt;')</div>
            <div class="method-item">
                <span class="method-name">$(selector)</span>
                <span class="method-desc">Select elements</span>
            </div>
            <div class="method-item">
                <span class="method-name">$(selector, context)</span>
                <span class="method-desc">Select within context</span>
            </div>
            <div class="method-item">
                <span class="method-name">$(element)</span>
                <span class="method-desc">Wrap element</span>
            </div>
            <div class="method-item">
                <span class="method-name">$(html)</span>
                <span class="method-desc">Create elements</span>
            </div>
        </div>
    </div>

    <!-- Traversal -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="arrow-right" class="icon"></span>
            <h3>Traversal (22)</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('.item').parent().addClass('active')</div>
            <div class="method-item">
                <span class="method-name">find(selector)</span>
                <span class="method-desc">Find descendants</span>
            </div>
            <div class="method-item">
                <span class="method-name">parent(), parents()</span>
                <span class="method-desc">Navigate up</span>
            </div>
            <div class="method-item">
                <span class="method-name">children()</span>
                <span class="method-desc">Direct children</span>
            </div>
            <div class="method-item">
                <span class="method-name">siblings()</span>
                <span class="method-desc">Siblings</span>
            </div>
            <div class="method-item">
                <span class="method-name">next(), prev()</span>
                <span class="method-desc">Adjacent</span>
            </div>
            <div class="method-item">
                <span class="method-name">first(), last(), eq()</span>
                <span class="method-desc">Position</span>
            </div>
            <div class="method-item">
                <span class="method-name">filter(), not(), is()</span>
                <span class="method-desc">Filter</span>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="edit" class="icon"></span>
            <h3>Content</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('#output').html('&lt;b&gt;Bold&lt;/b&gt;')</div>
            <div class="method-item">
                <span class="method-name">html()</span>
                <span class="method-desc">Get/set HTML</span>
            </div>
            <div class="method-item">
                <span class="method-name">text()</span>
                <span class="method-desc">Get/set text</span>
            </div>
            <div class="method-item">
                <span class="method-name">val()</span>
                <span class="method-desc">Get/set value</span>
            </div>
        </div>
    </div>

    <!-- Attributes -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="tag" class="icon"></span>
            <h3>Attributes</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('img').attr('src', 'image.jpg')</div>
            <div class="method-item">
                <span class="method-name">attr(), removeAttr()</span>
                <span class="method-desc">Attributes</span>
            </div>
            <div class="method-item">
                <span class="method-name">prop(), removeProp()</span>
                <span class="method-desc">Properties</span>
            </div>
            <div class="method-item">
                <span class="method-name">data(), removeData()</span>
                <span class="method-desc">Data attributes</span>
            </div>
        </div>
    </div>

    <!-- CSS/Classes -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="palette" class="icon"></span>
            <h3>CSS &amp; Classes</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('.box').addClass('active').css('color', 'red')</div>
            <div class="method-item">
                <span class="method-name">addClass()</span>
                <span class="method-desc">Add classes</span>
            </div>
            <div class="method-item">
                <span class="method-name">removeClass()</span>
                <span class="method-desc">Remove classes</span>
            </div>
            <div class="method-item">
                <span class="method-name">toggleClass()</span>
                <span class="method-desc">Toggle classes</span>
            </div>
            <div class="method-item">
                <span class="method-name">hasClass()</span>
                <span class="method-desc">Check class</span>
            </div>
            <div class="method-item">
                <span class="method-name">css()</span>
                <span class="method-desc">Get/set styles</span>
            </div>
        </div>
    </div>

    <!-- Events -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="zap" class="icon"></span>
            <h3>Events (22+)</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">$('.btn').on('click', handler)<br>$('.list').on('click', '.item', handler)</div>
            <div class="method-item">
                <span class="method-name">on(event, handler)</span>
                <span class="method-desc">Bind event</span>
            </div>
            <div class="method-item">
                <span class="method-name">on(event, selector, handler)</span>
                <span class="method-desc">Delegate</span>
            </div>
            <div class="method-item">
                <span class="method-name">off(), one()</span>
                <span class="method-desc">Remove, once</span>
            </div>
            <div class="method-item">
                <span class="method-name">trigger()</span>
                <span class="method-desc">Fire event</span>
            </div>
            <div class="method-item">
                <span class="method-name">click(), focus(), etc.</span>
                <span class="method-desc">Shortcuts</span>
            </div>
        </div>
    </div>
</div>

<!-- Utils Section -->
<div class="section-intro">
    <h2><span data-icon="layers" class="icon"></span> Utilities (_)</h2>
    <p>120+ Lodash-compatible utility functions for data manipulation</p>
</div>

<div class="reference-grid">
    <!-- Array -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="list" class="icon"></span>
            <h3>Array Methods</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">_.map([1,2,3], x =&gt; x * 2)<br>_.filter(users, u =&gt; u.active)</div>
            <div class="method-item">
                <span class="method-name">map, filter, reduce</span>
                <span class="method-desc">Transform</span>
            </div>
            <div class="method-item">
                <span class="method-name">forEach, each</span>
                <span class="method-desc">Iterate</span>
            </div>
            <div class="method-item">
                <span class="method-name">find, findIndex</span>
                <span class="method-desc">Search</span>
            </div>
            <div class="method-item">
                <span class="method-name">sortBy, orderBy</span>
                <span class="method-desc">Sort</span>
            </div>
            <div class="method-item">
                <span class="method-name">chunk, partition</span>
                <span class="method-desc">Split</span>
            </div>
        </div>
    </div>

    <!-- Object -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="package" class="icon"></span>
            <h3>Object Methods</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">_.pick(obj, ['name', 'age'])<br>_.groupBy(users, 'role')</div>
            <div class="method-item">
                <span class="method-name">keys, values, entries</span>
                <span class="method-desc">Access</span>
            </div>
            <div class="method-item">
                <span class="method-name">pick, omit</span>
                <span class="method-desc">Select fields</span>
            </div>
            <div class="method-item">
                <span class="method-name">merge, assign</span>
                <span class="method-desc">Combine</span>
            </div>
            <div class="method-item">
                <span class="method-name">groupBy, countBy</span>
                <span class="method-desc">Group</span>
            </div>
        </div>
    </div>

    <!-- String -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="type" class="icon"></span>
            <h3>String Methods</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">_.camelCase('hello world')<br>_.template('Hello {{name}}')(data)</div>
            <div class="method-item">
                <span class="method-name">camelCase, kebabCase</span>
                <span class="method-desc">Case</span>
            </div>
            <div class="method-item">
                <span class="method-name">capitalize, upperFirst</span>
                <span class="method-desc">Format</span>
            </div>
            <div class="method-item">
                <span class="method-name">template</span>
                <span class="method-desc">Templates</span>
            </div>
            <div class="method-item">
                <span class="method-name">escape, unescape</span>
                <span class="method-desc">Safety</span>
            </div>
        </div>
    </div>

    <!-- Function -->
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="code" class="icon"></span>
            <h3>Function Methods</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">_.debounce(fn, 300)<br>_.throttle(fn, 100)</div>
            <div class="method-item">
                <span class="method-name">debounce</span>
                <span class="method-desc">Delay execution</span>
            </div>
            <div class="method-item">
                <span class="method-name">throttle</span>
                <span class="method-desc">Limit frequency</span>
            </div>
            <div class="method-item">
                <span class="method-name">once</span>
                <span class="method-desc">Execute once</span>
            </div>
            <div class="method-item">
                <span class="method-name">memoize</span>
                <span class="method-desc">Cache results</span>
            </div>
        </div>
    </div>
</div>

<!-- Models Section -->
<div class="section-intro">
    <h2><span data-icon="database" class="icon"></span> Models (M)</h2>
    <p>Reactive data models with validation, computed properties, and pub/sub</p>
</div>

<div class="reference-grid">
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="plus" class="icon"></span>
            <h3>Model Creation</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">const user = M.create({<br> name: 'John',<br> age: 30<br>})</div>
            <div class="method-item">
                <span class="method-name">M.create(data)</span>
                <span class="method-desc">Create model</span>
            </div>
            <div class="method-item">
                <span class="method-name">M.extend(proto)</span>
                <span class="method-desc">Prototype</span>
            </div>
            <div class="method-item">
                <span class="method-name">model.get(key)</span>
                <span class="method-desc">Get value</span>
            </div>
            <div class="method-item">
                <span class="method-name">model.set(key, value)</span>
                <span class="method-desc">Set value</span>
            </div>
        </div>
    </div>

    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="bell" class="icon"></span>
            <h3>Reactivity</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">model.on('change:name', handler)<br>M.publish('topic', data)</div>
            <div class="method-item">
                <span class="method-name">model.on(event, handler)</span>
                <span class="method-desc">Listen changes</span>
            </div>
            <div class="method-item">
                <span class="method-name">M.publish(topic, data)</span>
                <span class="method-desc">Publish</span>
            </div>
            <div class="method-item">
                <span class="method-name">M.subscribe(topic, handler)</span>
                <span class="method-desc">Subscribe</span>
            </div>
        </div>
    </div>
</div>

<!-- More sections would continue similarly... -->
<!-- For brevity, I'll include key sections -->

<!-- Storage Section -->
<div class="section-intro">
    <h2><span data-icon="save" class="icon"></span> Storage (S)</h2>
    <p>Enhanced localStorage wrapper with JSON support and fallbacks</p>
</div>

<div class="reference-grid">
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="database" class="icon"></span>
            <h3>Storage Operations</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">S.set('user', {name: 'John'})<br>const user = S.get('user')</div>
            <div class="method-item">
                <span class="method-name">S.set(key, value)</span>
                <span class="method-desc">Store data</span>
            </div>
            <div class="method-item">
                <span class="method-name">S.get(key, default)</span>
                <span class="method-desc">Retrieve data</span>
            </div>
            <div class="method-item">
                <span class="method-name">S.remove(key)</span>
                <span class="method-desc">Delete item</span>
            </div>
            <div class="method-item">
                <span class="method-name">S.clear()</span>
                <span class="method-desc">Clear all</span>
            </div>
            <div class="method-item">
                <span class="method-name">S.keys()</span>
                <span class="method-desc">List keys</span>
            </div>
        </div>
    </div>
</div>

<!-- Elements Section -->
<div class="section-intro">
    <h2><span data-icon="grid" class="icon"></span> UI Elements</h2>
    <p>19 pre-built UI components with consistent API</p>
</div>

<div class="reference-grid">
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="window" class="icon"></span>
            <h3>Core Elements</h3>
        </div>
        <div class="reference-body">
            <div class="quick-example">Domma.elements.modal('#my-modal')<br>Domma.elements.alert('Hello!')</div>
            <div class="method-item">
                <span class="method-name">modal, dialog</span>
                <span class="method-desc">Overlays</span>
            </div>
            <div class="method-item">
                <span class="method-name">toast, alert</span>
                <span class="method-desc">Messages</span>
            </div>
            <div class="method-item">
                <span class="method-name">tabs, accordion</span>
                <span class="method-desc">Containers</span>
            </div>
            <div class="method-item">
                <span class="method-name">dropdown, tooltip</span>
                <span class="method-desc">Overlays</span>
            </div>
            <div class="method-item">
                <span class="method-name">carousel, timeline</span>
                <span class="method-desc">Content</span>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="section-intro">
    <h2><span data-icon="lightning" class="icon"></span> Quick Actions</h2>
    <p>Copy these common patterns for rapid development</p>
</div>

<div class="reference-grid">
    <div class="reference-card">
        <div class="reference-header">
            <span data-icon="copy" class="icon"></span>
            <h3>Common Patterns</h3>
        </div>
        <div class="reference-body">
            <div class="method-item">
                <span class="method-name">AJAX Form Submit</span>
                <button type="button" class="copy-btn" data-copy="$('#form').on('submit', e => { e.preventDefault(); Domma.http.post('/api', new FormData(e.target)); })">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span class="method-name">Dynamic List</span>
                <button type="button" class="copy-btn" data-copy="const list = data.map(item => `<li>${item.name}</li>`).join(''); $('#list').html(list);">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span class="method-name">Event Delegation</span>
                <button type="button" class="copy-btn" data-copy="$('.container').on('click', '.item', function() { $(this).toggleClass('active'); });">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
            <div class="method-item">
                <span class="method-name">Modal Confirmation</span>
                <button type="button" class="copy-btn" data-copy="if (await Domma.elements.confirm('Delete item?')) { /* Delete logic */ }">
                    <span data-icon="copy" class="icon"></span>
                </button>
            </div>
        </div>
    </div>
</div>

/**
 * Domma Reference - from public/showcase/reference.
 */
export function mount(root) {
    $('.copy-btn').on('click', function (e) {
        e.preventDefault();
        const text = $(this).data('copy');

        if (navigator.clipboard) {
          navigator.clipboard.writeText(text).then(() => {
            showCopyFeedback(this);
          });
        } else {
          // Fallback for older browsers
          const textArea = document.createElement('textarea');
          textArea.value = text;
          document.body.appendChild(textArea);
          textArea.select();
          document.execCommand('copy');
          document.body.removeChild(textArea);
          showCopyFeedback(this);
        }
      });
    function showCopyFeedback(button) {
        const $btn = $(button);
        const originalIcon = $btn.find('.icon').attr('data-icon');

        // Change to check icon
        $btn.find('.icon').attr('data-icon', 'check');
        $btn.css('color', 'var(--dm-color-success)');

        // Reset after 2 seconds
        setTimeout(() => {
          $btn.find('.icon').attr('data-icon', originalIcon);
          $btn.css('color', '');
        }, 2000);
      }
      // Enhance hover effects
    $('.reference-card').on('mouseenter', function () {
        $(this).addClass('shadow-lg');
      }).on('mouseleave', function () {
        $(this).removeClass('shadow-lg');
      });
}