Configuración

oziConf() es opcional — sin él, ozi-ui funciona con los valores por defecto (tema default, idioma en, todos los plugins cargados).

Llama a oziConf() justo después de incluir ozi.js:

<script src="/plugins/ozi-ui/ozi.js"></script>
<script>
    oziConf({ ... });
</script>

Configuración mínima

La mayoría de los proyectos solo necesita definir el tema y el idioma:

oziConf({
    theme: 'bootstrap5',
    lang:  'es'
});

Temas

oziConf({ theme: 'bootstrap5' });

El tema define el classMap — las clases CSS aplicadas por ozi-ui para los estados de validación, botones y retroalimentación visual. Consulta la sección classMap para personalizar.

Idiomas

oziConf({
    lang:         'es',
    fallbackLang: 'en'  // usado cuando una clave no existe en el idioma principal
});

Plugins — carga solo lo que necesitas

Por defecto ozi-ui carga todos los plugins. Para cargar solo los necesarios:

oziConf({
    plugins: ['loaddata', 'select', 'toggle']
});

Las dependencias se resuelven automáticamente — no es necesario declarar los módulos internos.

Plugins disponibles

Configuración completa

oziConf({

    // ── Tema y modo visual ──────────────────────
    theme:     'bootstrap5',  // 'default' | 'bootstrap5' | 'tailwind'
    themeMode: 'auto',        // 'light' | 'dark' | 'auto'

    // ── Idioma ──────────────────────────────────
    lang:         'es',
    fallbackLang: 'en',

    // ── Plugins a cargar ────────────────────────
    plugins: 'all',  // 'all' o array: ['loaddata', 'select', ...]

    // ── Core ────────────────────────────────────
    core: {
        urlBase:  './plugins/ozi-ui/',  // ruta base de los archivos
        log:      false,                // logs de depuración en la consola
        failFast: false                 // detiene el boot al primer error
    },

    // ── Configuración por plugin ─────────────────
    pluginConf: {

        loaddata: {
            progressBarGlobalClass: 'ozi-progress',
            interactiveValidation:  true   // valida campos al perder el foco
        },

        select: {
            imageDimension: '24px',   // tamaño por defecto de las imágenes en las opciones
            autoObserve:    false     // detecta nuevos elementos vía MutationObserver
        },

        autocomplete: {
            autoObserve: false
        },

        editor: {
            uicolor: 'var(--ozi-color-primary)'  // color de los botones activos y borde con foco
        },

        audio: {
            autoObserve: false
        },

        auth: {
            passMin:      12,  // mínimo de caracteres en la contraseña
            passMax:      64,  // máximo de caracteres en la contraseña
            userCaracter:  4   // mínimo de caracteres en el campo de usuario
        }
    },

    // ── classMap — sobrescribe el preset del tema ─
    classMap: {
        invalid:       'is-invalid',
        valid:         'is-valid',
        formValidated: 'was-validated',
        feedback:      'invalid-feedback',
        button:        'btn btn-primary',
        disabled:      'disabled'
    }

});

Referencia

core

pluginConf

loaddata

select

autocomplete

editor

audio

auth

classMap

Mapeo de tokens semánticos a clases CSS del framework UI. Se rellena automáticamente con el preset del tema — sobrescribe solo lo necesario.

Bootstrap 5 (por defecto del tema bootstrap5)

Tailwind (tema tailwind)

Sobrescritura puntual

Para ajustar solo un token sin cambiar el tema:

oziConf({
    theme: 'bootstrap5',
    classMap: {
        button: 'btn btn-danger'  // solo este cambia — el resto viene del preset
    }
});