Composants

Panneau latéralNouveau

Un formulaire ou un détail à côté de la page, sans la quitter : à droite sur ordinateur, plein écran sur téléphone. Le focus reste dedans, Échap ou le fond le ferment, et si quelque chose a été saisi on demande avant de tout perdre (AubuiDialog, jamais de popup native). Premier usage : Gestion › Papiers (Ajouter / Modifier un papier).

Essayer

C’est le composant réel. Tape quelque chose puis Échap : il te demande avant de fermer. Tab ne sort jamais du panneau ; le focus revient sur le bouton à la fermeture.

Installer

Rien à charger à la main. Le style est dans aubui.full.css ; aubui.js crée window.AubuiPanneau tout de suite et récupère aubui-panneau.js (≈ 2 Ko compressé, gardé un an en cache) seulement si la page contient un [data-aubui-panneau] ou au premier appel. Un appel fait avant son arrivée attend, puis est joué.

Si la page garde une ancienne copie de aubui.full.css en cache (un ?v= écrit à la main dans son gabarit), le composant le voit et charge components/panneau.css de lui-même. Mieux : versionner la feuille avec aub_asset() (la version suit le fichier).

PHP

<link rel="stylesheet" href="<?= aub_asset('https://ui.aubota.xyz/css/aubui/aubui.full.css') ?>" data-aubui-css="1">

Le HTML

HTML

<button type="button" class="aub-btn aub-btn--primary" data-aubui-panneau-ouvrir="#ajout">＋ Ajouter</button>

<div class="aub-panneau" id="ajout" hidden data-aubui-panneau>
  <div class="aub-panneau__fond" data-aubui-panneau-fond></div>
  <div class="aub-panneau__boite" role="dialog" aria-modal="true" aria-labelledby="ajout-titre" tabindex="-1">
    <header class="aub-panneau__tete">
      <h2 id="ajout-titre">Ajouter</h2>
      <button type="button" class="aub-btn aub-btn--sm aub-btn--ghost" data-aubui-panneau-fermer aria-label="Fermer">✕</button>
    </header>
    <div class="aub-panneau__corps">…</div>
    <footer class="aub-panneau__pied">…</footer>  <!-- facultatif : toujours visible en bas -->
  </div>
</div>

Classe / attribut	Rôle
`.aub-panneau` + `hidden`	Le calque plein écran (fond + boîte). Fermé = `hidden`.
`.aub-panneau__boite`	La boîte : 44 rem à droite ; `--large` 84 rem (ex. formulaire + document côte à côte), `--etroit` 28 rem. Plein écran sous 720 px.
`.aub-panneau__tete` · `__corps` · `__pied`	Titre + ✕ · contenu qui défile · actions toujours visibles.
`[data-aubui-panneau-ouvrir="#id"]`	Ouvre ce panneau (le bouton récupère le focus à la fermeture).
`[data-aubui-panneau-fermer]` · `[data-aubui-panneau-fond]`	Ferment (avec la question si quelque chose a été saisi).

API `window.AubuiPanneau`

AubuiPanneau.ouvrir('#ajout', {
  declencheur: bouton,               // où rendre le focus (sinon : l’élément qui l’avait)
  focus: '#titre',                   // où mettre le focus en entrant (sinon : la boîte)
  saisie: function () { return modifie; },   // true → question avant de fermer
  question: 'Fermer sans enregistrer ? Ce que tu as saisi sera perdu.', ok: 'Fermer',
  surFermeture: function (raison) {}  // echap · fond · bouton · api
});
AubuiPanneau.fermer('#ajout').then(function (ferme) { /* false : la personne reste */ });
AubuiPanneau.fermer('#ajout', { force: true });   // après « Enregistrer » : sans question
AubuiPanneau.propre('#ajout');                      // la saisie est enregistrée
AubuiPanneau.ouvert();                               // le panneau ouvert, ou null

Option	Rôle
`saisie`	Fonction : `true` si quelque chose serait perdu. Par défaut, le panneau le devine : une frappe ou un choix fait dedans depuis l’ouverture. `false` : jamais de question.
`question` · `ok`	Le texte d’AubuiDialog.confirm et son bouton (danger).
`surFermeture(raison)`	Appelé une fois le panneau fermé (pas si la personne choisit de rester).
Évènements	`aubui:panneau-ouvert` et `aubui:panneau-ferme` (`detail.raison`) sur l’élément `.aub-panneau`.

Essayer

Installer

Le HTML

API window.AubuiPanneau

API `window.AubuiPanneau`