API figée

Source : ui.aubota.xyz/API.md — rendu à la volée, toujours à jour.

Installation

<script src="https://ui.aubota.xyz/js/aubui.js" defer></script>

Le script injecte automatiquement le CSS et charge, dans l’ordre : dialog.js, engine.js, theme.js, accent.js, actions.js, aubui-invite.js, puis (mode complet) navbar.js, notifications.js, timepicker.js. Mode léger : window.AubotaNav = { disabled: true } avant le script.

Point d’entrée CSS (si besoin manuel) : https://ui.aubota.xyz/css/aubui/aubui.full.css?v=<AUB_BUILD> avec data-aubui-css="1" (évite le double chargement). aubui.css à la racine reste un alias de compatibilité.

Doc vivante de chaque élément ci-dessous : https://ui.aubota.xyz/

Syntaxe déclarative (recommandée)

Tu écris des attributs. Le moteur ajoute les classes.

Boutons — aub-btn

<button aub-btn primary sm>OK</button>

Cartes — aub-card

<div aub-card pad>
  <h3 aub-title>Titre</h3>
  <p aub-muted>Corps</p>
</div>

Champs

Alertes & badges

Texte

Navbar — aub-nav

<nav aub-nav brand="Feedback" brand-href="/">
  <a href="/public">Publics</a>
  <a href="/submit">Soumettre</a>
</nav>

Généré automatiquement :

• .aub-nav__brand
• .aub-nav__links + .aub-nav__link (+ --active selon l’URL)
• .aub-nav__spacer
• .aub-nav__actions (cloche + thème + burger)
• Drawer mobile (.aub-nav__drawer) + overlay

Breakpoint hamburger : ≤ 720px

Notifications

Structure générée dans la navbar (ou manuelle) :

AubotaNotif.setCount(3);
AubotaNotif.render([
  { id: 'n1', module: 'Hub', title: '…', body: '…', ts: 1760000000, unread: true, href: '/…' }
]);
AubotaNotif.toast({ module, title, body, href, onClick });
AubotaNotif.load();

Endpoint : GET → { ok, unread, items[] }, POST { act: 'read', id }. Événements document : aubota:notif-new (émis, {items}), aubota:notif-count (écouté, {unread}), aub-nav-ready (écouté).

Classes classiques (toujours valides)

Tu peux continuer à écrire :

<button class="aub-btn aub-btn--primary aub-btn--sm">OK</button>

Utile pour la migration progressive ou le CSS direct.

Boutons — .aub-btn

Champs — .aub-field + .aub-label + .aub-input

Cartes & alertes

Layout utilitaires

.aub-flex .aub-grid .aub-flex-col .aub-items-center .aub-justify-between .aub-gap-2 … .aub-gap-6 .aub-mt-* .aub-mb-* .aub-p-* .aub-stack .aub-stack-lg .aub-max-w-md

Comportements data-aub-*

API JS globale

Aubui.process()       // re-scan attributs sur tout le document
Aubui.processNav()    // re-scan navbars
AubotaNotif.setCount(n)
AubotaNotif.render(items)
AubotaNotif.open()
AubotaNotif.close()
AubotaNotif.load()
AubotaNotif.toast(opts)

AubuiDialog.alert(msg, { title, ok, danger })               // Promise<void>
AubuiDialog.confirm(msg, { title, ok, cancel, danger })     // Promise<boolean>
AubuiDialog.prompt(msg, { value, placeholder, title, ok, cancel, type, multiline }) // Promise<string|null>
AubuiToast.show(msg, { kind, duration, action: { label, onClick } })  // { close() }
AubuiToast.success|error|warning|info(msg, opts)

AubuiTheme.apply('dark'|'light', { persist })  ·  AubuiTheme.current()
AubuiAccent.apply(name, { persist })  ·  AubuiAccent.current()  ·  AubuiAccent.accents  ·  AubuiAccent.buildHtml(opts)
AubuiPrefsSync.save({ accent, theme, … })  ·  AubuiPrefsSync.readCookie()

AubuiTime.scan(root)  ·  AubuiTime.enhance(input)
AubuiSearch.init(input)  ·  AubuiSearch.scan(root)
AubInvite.require({ action, title, body, cta, dismiss, next })  // Promise<boolean>
AubInvite.isDemo()  ·  AubInvite.guard(fn, opts)
AubotaNavMount()

Événements document : aubui:dialog-ready, aubui:theme {theme}, aubui:accent {accent}, aubui:prefs-ready, aubui:prefs-saved, aubui:prefs-error {error}. Sur l’input de recherche : aubui:search:select (detail = résultat, annulable).

Interdit dans les modules : alert(), confirm(), prompt() natifs → AubuiDialog / data-aub-confirm.

Pages layout (minces)

/css/aubui/pages/home.css auth.css share.css social.css feedback.css natacha.css — structure seulement.

Feedback — classes page (feedback.css)

Natacha — classes page (natacha.css)

Social — classes page (social.css)

Navbar globale — navbar.js

Injectée automatiquement par aubui.js (sauf AubotaNav.disabled = true).

<script>
window.AubotaNav = {
  site: 'feedback',
  user: { loggedIn: true, name: 'fusty' },
  links: [
    { href: '/', label: 'Accueil' },
    { href: '/public', label: 'Publics' }
  ]
};
</script>
<script src="https://ui.aubota.xyz/js/aubui.js" defer></script>

Structure : barre :AUBOTA + modules · trait accent · sous-nav centrée.

Règle d’or

Toute nouvelle UI = une ligne dans ce fichier + CSS + entrée catalogue + doc.

Concrètement : toute nouveauté Aubui = une section de doc dans pages/ + son entrée (avec sources et news) dans docs/registry.php, livrées avec le code. Voir README, « Règle ».

Time picker — aub-time

Roues heures / minutes (précision 1 min), style curseur central.

<input aub-time name="start_time" value="09:00">
<input aub-time name="end_time" value="" data-aub-time-empty>

Chargé automatiquement via aubui.js (mode complet).

Recherche — data-aubui-search (aubui-search.js, non chargé par aubui.js)

<link rel="stylesheet" href="https://ui.aubota.xyz/css/aubui/components/search.css">
<script src="https://ui.aubota.xyz/js/aubui-search.js" defer></script>
<input data-aubui-search data-search-url="/api/search" data-search-params='{"scope":"users"}' data-search-min="2">
<input data-aubui-search data-search-list-var="MES_DONNEES" data-search-fields="label,sub">

Classes : .aub-search-wrap .aub-search .aub-search-results .aub-search-item (.is-active) .aub-search-ico .aub-search-main .aub-search-label .aub-search-sub .aub-search-empty.

États vides — .aub-empty (Hub seulement pour l’instant)

.aub-empty + __icon __title __text __cta. Squelettes Hub : .hub-skel + --line --title --block. Styles dans hub.aubota.xyz/assets/polish.css, pas encore dans aubui.full.css.