Configurações

O oziConf() é opcional — sem ele o ozi-ui já funciona com os valores padrão (tema default, idioma en, todos os plugins carregados).

Chame oziConf() logo após incluir o ozi.js:

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

Configuração mínima

A maioria dos projetos só precisa definir o tema e o idioma:

oziConf({
    theme: 'bootstrap5',
    lang:  'pt-BR'
});

Temas

oziConf({ theme: 'bootstrap5' });

O tema define o classMap — as classes CSS aplicadas pelo ozi-ui para estados de validação, botões e feedback visual. Veja a seção classMap para customizar.

Idiomas

oziConf({
    lang:         'pt-BR',
    fallbackLang: 'en'     // usado quando uma chave não existe no idioma principal
});

Plugins — carregar só o que precisa

Por padrão o ozi-ui carrega todos os plugins. Para carregar apenas os necessários:

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

As dependências são resolvidas automaticamente — não é necessário declarar os módulos internos.

Plugins disponíveis

Configuração completa

oziConf({

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

    // ── Idioma ──────────────────────────────────
    lang:         'pt-BR',
    fallbackLang: 'en',

    // ── Plugins a carregar ───────────────────────
    plugins: 'all',  // 'all' ou array: ['loaddata', 'select', ...]

    // ── Core ────────────────────────────────────
    core: {
        urlBase:  './plugins/ozi-ui/',  // caminho base dos arquivos
        log:      false,                // logs de debug no console
        failFast: false                 // para o boot ao primeiro erro
    },

    // ── Configuração por plugin ──────────────────
    pluginConf: {

        loaddata: {
            progressBarGlobalClass: 'ozi-progress',
            interactiveValidation:  true   // valida campos ao sair do foco
        },

        select: {
            imageDimension: '24px',   // tamanho padrão das imagens nas opções
            autoObserve:    false     // detecta novos elementos via MutationObserver
        },

        autocomplete: {
            autoObserve: false
        },

        editor: {
            uicolor: 'var(--ozi-color-primary)'  // cor dos botões ativos e foco
        },

        audio: {
            autoObserve: false
        },

        auth: {
            passMin:      12,  // mínimo de caracteres na senha
            passMax:      64,  // máximo de caracteres na senha
            userCaracter:  4   // mínimo de caracteres no campo usuário
        }
    },

    // ── classMap — sobrescreve o preset do tema ──
    classMap: {
        invalid:       'is-invalid',
        valid:         'is-valid',
        formValidated: 'was-validated',
        feedback:      'invalid-feedback',
        button:        'btn btn-primary',
        disabled:      'disabled'
    }

});

Referência

core

pluginConf

loaddata

select

autocomplete

editor

audio

auth

classMap

Mapeamento de tokens semânticos para classes CSS do framework UI. Preenchido automaticamente pelo preset do tema — sobrescreva apenas o necessário.

Bootstrap 5 (padrão do tema bootstrap5)

Tailwind (tema tailwind)

Sobrescrita pontual

Para ajustar só um token sem trocar o tema:

oziConf({
    theme: 'bootstrap5',
    classMap: {
        button: 'btn btn-danger'  // só este muda — os demais vêm do preset
    }
});