Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TheSerchCp/SEAM/llms.txt

Use this file to discover all available pages before exploring further.

SEAM ships a compact, self-contained component library written in vanilla JavaScript. Most UI components are plain functions that accept a props object and return an HTML string, which is then injected directly into the DOM. Feedback components such as Modal, Toast, and Loader operate differently — they mount themselves on document.body imperatively rather than returning markup. There are no virtual-DOM diffing steps, no framework lifecycle hooks, and no build-time compilation — just composable functions you import, call, and render.

Form Components

Form, InputField, SelectField, TextareaField, and the FormValidator validation engine.

Table

A responsive Table component with a desktop <table> view and an automatic mobile card layout.

Modal & Toast

Modal, FormModal, Toast convenience helpers, Loader overlay, and EventBus toast events.

Quickstart

Get SEAM running locally in under five minutes.

​
All shared components

​
UI components

ComponentDescription
FormGenerates a complete <form> element from a fields array — delegates rendering to the appropriate field component.
InputFieldRenders a styled <input> with an optional label, inline error message, and success/error state icons.
SelectFieldCustom-styled dropdown that supports single and multi-select; uses a hidden <input> so standard FormData picks up the value.
TextareaFieldRenders a <textarea> with an optional character counter and inline validation feedback.
TableRenders a responsive data table on desktop and automatically switches to a card-based layout on mobile.
ModalConfirmation dialog appended directly to document.body; supports a danger variant and an async onConfirm callback.
FormModalWraps Modal + Form into a single create/edit dialog with FormValidator wired up automatically.
ToastNon-blocking notification banner with four severity levels; auto-dismisses after a configurable duration.
LoaderFull-screen overlay with a spinning indicator; controlled via Loader.show(message) / Loader.hide().

​
Layout components

ComponentDescription
HeaderTop navigation bar that shows the SEAM logo and the currently authenticated user’s name.
SidebarRenders a fixed left sidebar on desktop and a floating bottom navigation bar on mobile; reads menu items from getSidebarItems().
FooterMinimal footer that outputs the current year and the SEAM copyright notice.

​
Utilities

UtilityDescription
FormValidatorClass-based validator that binds to a form element by ID, evaluates a rule schema on every input/focusout event, and optionally enables or disables a submit button.
ValidatorsLow-level validation primitives (validateEmail, validatePassword, validateText) used internally by FormValidator.
ComponentInitializerThin helper that calls initSelectFields() after a component tree is injected into the DOM.

​
HTML-string rendering model

SEAM components fall into two categories based on how they reach the screen. String-returning components (Form, InputField, SelectField, TextareaField, Table) accept a props object and return an HTML string. Inject the string into the DOM with innerHTML, then call initSelectFields() if any SelectField elements are present: 
import { Form }             from '../../shared/components/ui/Form.js';
import { initSelectFields } from '../../shared/components/ui/SelectField.js';

document.getElementById('my-container').innerHTML = Form({
    id: 'my-form',
    fields: [
        { name: 'email', label: 'Email', type: 'email', required: true },
    ],
});

initSelectFields(); // activates any SelectField dropdowns rendered above
Self-mounting components (Modal, FormModal, Toast, Loader) append or manage their own DOM nodes directly: 
import { Modal }             from '../../shared/components/Modal.js';
import { FormModal }         from '../../shared/components/FormModal.js';
import { Toast, showSuccess } from '../../shared/components/Toast.js';
import { Loader }            from '../../shared/components/Loader.js';

// Modal appends itself to document.body — no innerHTML assignment needed.
await Modal({ title: '¿Confirmar?', onConfirm: async () => ({ success: true }) });

// Toast appends a banner to #toast-container and returns the toast element's id.
const id = Toast({ message: 'Guardado', type: 'success' });

// Loader is a singleton; call its methods to show/hide the overlay.
Loader.show('Cargando…');
Loader.hide();
For string-returning components, event listeners must be attached after the string has been written to innerHTML. FormModal and FormValidator.attach() both handle this automatically when used together.

Build docs developers (and LLMs) love

Get started for freeTalk to us