@codifyo/vue-crud

Générateur d'interface CRUD dynamique, réactif et hautement personnalisable pour Vue 3 (Composition API) basé sur Bootstrap 4.

🚀 Fonctionnalités Clés

Mode Asynchrone Serveur : Pagination, tris multi-colonnes, filtres et recherches sont tous délégués au backend sans gestion mémoire inutile.
Gestion des Actions Polyvalente : Actions globales, de ligne ou groupées (bulk), ouvertes en modales, en pseudo-pages ou en édition en ligne.
Ciblage d'Emplacements d'Actions (locations) : Filtrez où chaque bouton d'action doit apparaître (['list'], ['view'], [] pour masqué).
Filtres transmis aux Actions (includeFilters) : Les actions globales et groupées (ex : export) reçoivent les filtres et le tri courants de la liste.
Déclenchement Programmatique (triggerAction) : Déclenchez n'importe quelle action par code ou depuis vos slots.
Sélecteur de Colonnes avec Persistance : Masquez/affichez des colonnes avec sauvegarde automatique dans le localStorage.
Rendu Pilôté par JSON (CrudJsonConfigPage) : Générez des interfaces CRUD complètes et déclaratives depuis un endpoint JSON distant.
Surcharge Totale via Slots Vue 3 : Surchargez les filtres, les cellules de tableau, les boutons d'actions ou les sections des vues détaillées.
Composants d'Aide aux Slots (CrudViewProp, CrudActionButton) : Affichez facilement des propriétés formatées ou des boutons d'action (avec contrôles automatiques de visibilité et de droits) dans vos templates personnalisés.
Synchronisation avec l'URL : Mémorisation dynamique de l'état (page, limit, sort, filters, action, id) dans l'URL.

📦 Installation

bash

npm install git+ssh://git@github.com/codifyo/vue-crud.git

Prérequis :

vue (^3.5.x)
bootstrap (4.x) / font-awesome (5.x ou 6.x)

Import des styles : Dans votre fichier principal (ex: main.ts ou dans votre composant App) :

typescript

import '@codifyo/vue-crud/dist/style.css';

📚 Documentation Détaillée

Guide Complet <CrudPage> (Configuration & API) Documentation du composant principal et du typage TypeScript CrudConfig.
Colonnes et Affichage Types de colonnes (text, badge, date, html...) et leurs options.
Actions et Événements Actions globales, de ligne, en masse, filtrage (locations) et création d'actions spécifiques.
Surcharge et Slots Personnalisation totale via les slots Vue 3.
Configuration par JSON Distant (<CrudJsonConfigPage>) Guide pour piloter vos CRUD depuis votre API backend.
Guide d'Intégration IA Directives pour les agents IA et intégrations d'architecture.

💻 Exemple Rapide

vue

<template>
  <CrudPage :config="config" />
</template>

<script setup lang="ts">
import { CrudPage, defineCrudConfig } from '@codifyo/vue-crud';

const config = defineCrudConfig({
  title: 'Produits',
  itemName: 'Produit',
  idKey: 'id',
  
  columns: [
    { key: 'name', label: 'Nom', sortable: true },
    { key: 'price', label: 'Prix (€)', sortable: true },
    { key: 'status', label: 'Statut', type: 'badge' }
  ],
  
  api: {
    fetchList: async (params) => {
      const query = new URLSearchParams({ page: String(params.page), limit: String(params.limit) });
      const res = await fetch(`/api/products?${query}`);
      return res.json();
    }
  },

  options: {
    perPage: 15,
    syncUrl: true,
    columnChooserStorageKey: 'products_cols'
  }
});
</script>

🎨 Démos Inclues

Retrouvez des implémentations fonctionnelles dans /src/demo/ :

BasicDemo.vue : Rendu minimaliste (liste et pagination).
AdvancedDemo.vue : Démo avancée (actions ciblées, édition en ligne, filtres, sélecteur de colonnes).
demo-config.json : Modèle de rendu JSON distant.

📝 Créer des formulaires sans `@codifyo/form-vue`

La librairie ne vous impose aucune librairie de formulaires. Lors d'une action personnalisée nécessitant un formulaire (via slot ou component), ou en utilisant les slots des vues, vous pouvez intégrer n'importe quel formulaire fait maison :

vue

<CrudPage :config="config">
  <template #form="{ item, action, onSuccess, onCancel }">
    <form @submit.prevent="submitMyForm(item, onSuccess)">
      <div class="form-group">
        <label>Nom</label>
        <input v-model="item.name" class="form-control" />
      </div>
      <button type="submit" class="btn btn-primary">Enregistrer</button>
      <button type="button" class="btn btn-secondary" @click="onCancel">Annuler</button>
    </form>
  </template>
</CrudPage>

♿ Accessibilité

La librairie vise les critères WCAG 2.2 (niveaux A et AA) pour la structure, les rôles ARIA et le clavier :

Tableau : tri au clavier (bouton dans l'en-tête, aria-sort), cases de sélection libellées, aria-busy pendant le chargement, annonce du résultat (« Affichage de X à Y sur Z ») dans une zone aria-live.
Actions : nom accessible garanti (repli sur name si ni label ni title), icônes masquées aux lecteurs d'écran, état « en cours » via aria-disabled pour conserver le focus.
Menus déroulants : flèches haut/bas, Home/End, Escape (retour du focus au déclencheur).
Modales : aria-modal, titre relié par aria-labelledby, piège à focus, Escape, restauration du focus.
Pseudo-pages : le focus passe au titre de la vue affichée (liste ou action).
Onglets : flèches gauche/droite, Home/End.
Pagination : aria-current="page", liens désactivés non focusables.
Notifications : zone polite, role="alert" réservé aux erreurs et avertissements, pause au survol et au focus.

Contrastes de couleurs : le rendu visuel (couleurs, contrastes, indicateur de focus) dépend de la librairie CSS utilisée (Bootstrap 4 par défaut) et de votre thème. Assurer un contraste conforme (4,5:1 pour le texte) n'est pas de la responsabilité de cette librairie : à vérifier et ajuster côté projet. À titre d'exemple, le btn-primary par défaut de Bootstrap 4 (blanc sur #007bff) n'atteint que 3,98:1.

🛠 Troubleshooting (Dépannage)

L'interface n'a pas de style / s'affiche mal : Vérifiez que vous avez bien importé @codifyo/vue-crud/dist/style.css ainsi que Bootstrap 4.
Une action n'apparaît pas : Vérifiez la propriété locations de votre action. Si vous ne mettez rien, elle s'affiche partout. Si vous mettez [], elle sera masquée (mais déclenchable via API). Vérifiez également la fonction show().
La pagination ne marche pas (les données sont toutes affichées) : @codifyo/vue-crud est pensé pour être asynchrone côté serveur. Votre backend DOIT retourner un objet de type { data: [...], total: X } et gérer lui-même le filtrage/tri avec les paramètres envoyés par l'API fetchList.
Des erreurs avec nl2br dans les colonnes : Assurez-vous d'avoir bien typé votre colonne type: 'html' et activé nl2br: true.

@codifyo/vue-crud ​

🚀 Fonctionnalités Clés ​

📦 Installation ​

📚 Documentation Détaillée ​

💻 Exemple Rapide ​

🎨 Démos Inclues ​

📝 Créer des formulaires sans @codifyo/form-vue ​

♿ Accessibilité ​

🛠 Troubleshooting (Dépannage) ​