Dependencies

The library is written in pure vanilla JavaScript but is designed to integrate seamlessly with popular external libraries when available. The code gracefully handles the absence of these dependencies.

The library has minimal dependencies and works with:

• Modern browsers (ES6+).
• jQuery (for some form functions).
• Bootstrap (for UI components).
• Bootbox (for dialogs).
• Notyf (for notifications, optional)

Useful Dependencies

Bootstrap

Used for tab management and modal functionality:

• Tab initialization and navigation (src/tabs.js).
• Modal instance management.
• Bootstrap classes and data attributes.

jQuery

Used for enhanced form field functionality:

• Select2 integration for improved select fields.
• Datepicker integration for date inputs.
• Dynamic field initialization.

Notyf

Enhanced notifications (falls back to basic alerts):

• Toast notifications with icons.
• Configurable duration and positioning.
• Multiple notification types.

Bootbox

Enhanced dialog boxes:

• Confirmation dialogs.
• Prompt dialogs for field editing.
• Customizable dialog options.

Graceful Degradation

The library includes conditional checks to ensure functionality even when external dependencies are not available:

// Example: jQuery availability check.
if (typeof window.jQuery !== 'function') {
    console.error('window or jQuery is not available.');
    return;
}

// Example: Bootstrap availability check.
if (typeof bootstrap !== 'undefined') {
    new bootstrap.Tab(element).show();
}

Installation Recommendations

For full functionality, include these dependencies in your project:

<!-- Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- jQuery (for enhanced form features) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Font Awesome (for icons in the UI) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" />

<!-- Optional: Bootbox for dialogs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.locales.min.js"></script>

<!-- Optional: Notyf for notifications -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/notyf.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/notyf.min.js"></script>