composants-ui

Composants UI réutilisables en vanilla JS (sans framework). 7 composants avec des props (options) pour les utiliser seuls ou ensemble, dans Laravel, Vite, HTML ou tout projet front.

Deux modes d’emploi

Mode 1 — Tout le pack (recommandé pour plusieurs composants)

Tu importes une seule fois le JS et le CSS complets. Ensuite tu utilises uniquement les composants dont tu as besoin (les autres ne s’initialisent pas s’il n’y a pas de markup correspondant).

<link rel="stylesheet" href="node_modules/composants-ui/dist/composants.css" />
<script src="node_modules/composants-ui/dist/composants.js"></script>

// Avec Vite / bundler
import 'composants-ui/dist/composants.css';
import 'composants-ui/dist/composants.js';
// window.ComposantsUI contient tout

Mode 2 — Un seul composant (import ciblé)

Tu peux n’importer qu’un seul composant (JS + CSS) pour alléger la page. Chaque composant est livré en fichier séparé.

Exemple : seulement SearchInput

<link rel="stylesheet" href="node_modules/composants-ui/dist/search.css" />
<script src="node_modules/composants-ui/dist/search.js"></script>

// Avec bundler
import 'composants-ui/search.css';
import 'composants-ui/search.js';
// window.ComposantsUI.createSearchInput et initSearchInput uniquement

Exemple : seulement Modal

<link rel="stylesheet" href="node_modules/composants-ui/dist/modal.css" />
<script src="node_modules/composants-ui/dist/modal.js"></script>

Exemple : SearchInput + Modal (plusieurs composants)

Charge les deux paires JS/CSS (ordre libre). L’objet window.ComposantsUI est enrichi à chaque script.

<link rel="stylesheet" href="node_modules/composants-ui/dist/search.css" />
<link rel="stylesheet" href="node_modules/composants-ui/dist/modal.css" />
<script src="node_modules/composants-ui/dist/search.js"></script>
<script src="node_modules/composants-ui/dist/modal.js"></script>
<script src="node_modules/composants-ui/dist/reinit.js"></script>

Si tu charges du contenu en AJAX qui contient des composants, inclus aussi reinit.js et appelle ComposantsUI.reinit(conteneur) après l’injection.

Les 7 composants et leurs props

Chaque composant est réutilisable et accepte des props (un objet d’options) passé à la fonction create*. En HTML, les “props” correspondent aux attributs data-* et aux classes.

1. SearchInput

Champ de recherche avec bouton réinitialiser et callback.

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | placeholder | string | 'Rechercher...' | Placeholder de l’input | | value | string | — | Valeur initiale | | onChange | function(value) | — | Appelé à chaque changement | | className | string | — | Classe(s) sur le conteneur | | id | string | — | ID du conteneur | | style | string | — | Style inline du conteneur |

Retour : élément DOM (div).

Usage HTML : classe comp-search-input, data-search-input, data-search-actions, data-search-reset. Optionnel : data-search-onchange="nomFonction" (fonction globale).

Import seul : composants-ui/search.js + composants-ui/search.css

2. AddButton

Bouton ou lien « Ajouter » (ou autre libellé).

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | label | string | 'Ajouter' | Texte du bouton | | href | string | — | Si défini, rend un <a> au lieu d’un <button> | | onClick | function() | — | Clic (ignoré si href présent) | | disabled | boolean | — | Bouton désactivé | | iconHTML | string | icône + par défaut | HTML de l’icône | | className | string | — | Classe(s) | | id | string | — | ID | | style | string | — | Style inline |

Retour : élément DOM (button ou a).

Import seul : composants-ui/add-button.js + composants-ui/add-button.css

3. Modal

Fenêtre modale avec titre, corps, pied, fermeture (Escape + backdrop).

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | title | string | — | Titre (optionnel) | | size | string | 'sm' | sm, md, lg, xl, x, xs, xm, xxl, full | | bodyHTML | string | '' | HTML du corps | | footerHTML | string | — | HTML du pied (ex. boutons) | | className | string | — | Classe sur l’overlay | | id | string | — | ID de l’overlay |

Retour : { element, open, close } — il faut ajouter element au DOM puis appeler open() / close().

Usage HTML : classe comp-modal-overlay, data-modal-backdrop, data-modal-close. Init automatique ou ComposantsUI.initModal(el).

Import seul : composants-ui/modal.js + composants-ui/modal.css

4. FilterPanel

Bouton « Filter » + panneau qui s’ouvre/ferme (clic extérieur pour fermer).

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | contentHTML | string | '' | HTML du contenu du panneau | | onClose | function() | — | Appelé à la fermeture (ex. clic extérieur) | | buttonClassName | string | — | Classe du bouton | | panelClassName | string | — | Classe du panneau | | buttonId | string | — | ID du bouton | | panelId | string | — | ID du panneau |

Retour : { buttonElement, panelElement, open, close } — à insérer dans le DOM.

Usage HTML : bouton avec data-filter-toggle, panneau avec classe comp-filter-panel. Optionnel : data-filter-panel-id pour lier par ID.

Import seul : composants-ui/filter-panel.js + composants-ui/filter-panel.css

5. StatCard

Carte de statistique (valeur + titre + icône).

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | title | string | '' | Titre sous la valeur | | value | string/number | '0' | Valeur affichée | | iconSvg | string | chemin par défaut | Chemin SVG dans l’icône | | iconBgColor | string | '#f3f4f6' | Fond de l’icône | | iconColor | string | '#6b7280' | Couleur de l’icône | | bgColor | string | '#fff' | Fond de la carte | | borderColor | string | '#e5e7eb' | Bordure | | textColor | string | '#374151' | Texte | | className | string | — | Classe(s) | | id | string | — | ID | | style | string | — | Style inline |

Retour : élément DOM.

Import seul : composants-ui/stat-card.js + composants-ui/stat-card.css

6. StatsGrid

Grille pour afficher plusieurs StatCards (ou autres blocs).

| Prop (options) | Type | Défaut | Description | |----------------|------|--------|-------------| | children (1er arg) | array | — | Liste d’éléments DOM (ex. StatCards) | | overrideGrid | boolean | — | Si true, n’applique pas la grille par défaut | | className | string | — | Classe(s) sur le conteneur | | id | string | — | ID | | style | string | — | Style inline |

Retour : élément DOM (conteneur). Utilisation : createStatsGrid([card1, card2], { className: 'my-grid' }).

Import seul : composants-ui/stats-grid.js + composants-ui/stats-grid.css

7. reinit (utilité)

Pas un composant visuel : ré-initialise tous les composants déjà chargés dans un conteneur (utile après chargement AJAX).

ComposantsUI.reinit(document.getElementById('contenu-dynamique'));
// ou
ComposantsUI.reinit(); // toute la page

À utiliser après avoir chargé au moins un composant. Si tu n’utilises que des composants « create » (sans markup existant), tu n’as pas besoin de reinit.

Fichier : composants-ui/reinit.js (pas de CSS).

Récap des imports « un seul élément »

| Composant | JS | CSS | |-----------|----|-----| | SearchInput | composants-ui/search.js | composants-ui/search.css | | AddButton | composants-ui/add-button.js | composants-ui/add-button.css | | Modal | composants-ui/modal.js | composants-ui/modal.css | | FilterPanel | composants-ui/filter-panel.js | composants-ui/filter-panel.css | | StatCard | composants-ui/stat-card.js | composants-ui/stat-card.css | | StatsGrid | composants-ui/stats-grid.js | composants-ui/stats-grid.css | | reinit | composants-ui/reinit.js | — |

Tu peux mélanger : par exemple importer tout le pack sur une page, ou n’importer que search.js + search.css et n’utiliser que le SearchInput. Les 7 composants ont bien des props (options) documentées ci-dessus ; en JS tu les passes à ComposantsUI.create*(options), en HTML via les data-* et classes.

Tableau (elegant-table)

En plus des 7 composants, le package fournit un tableau avec tri, pagination et actions :

• composants-ui/elegant-table.js + composants-ui/elegant-table.css
• Structure HTML spécifique (IDs : select-all, page-size, btn-prev, btn-next, page-numbers, actions-dropdown). Voir la démo fournie.
• Callbacks optionnels : ElegantTableOnRowClick, ElegantTableOnEdit, ElegantTableOnDelete.

Personnalisation

• Thème : surcharger les variables CSS dans :root (ex. --primary, --primary-hover, --gray-* dans composants.css ou dans ton propre CSS).
• Props de style : la plupart des create* acceptent className, id, style pour adapter l’apparence.

Licence

MIT