Surcharge et Slots

Le composant <CrudPage> expose de nombreux slots pour une personnalisation complète.

Slots de la Liste et du Tableau

Nom du Slot	Data exposées (v-slot="data")	Description
#filters	{ config, modelValue, updateModelValue }	Surcharge complète de la barre de filtres au-dessus du tableau.
#cell-[key]	{ item, value, currentUrl, currentPath }	Surcharge le rendu d'une cellule spécifique (ex: #cell-status). Expose currentUrl et currentPath pour la construction de liens (backUrl, router-link).
#actions	{ item }	Surcharge complète de la colonne des boutons d'actions d'une ligne du tableau.
#empty	-	Surcharge le visuel affiché lorsque le tableau ne contient aucune donnée.
#inline-form	{ column, modelValue, updateModelValue, config }	Surcharge le composant de formulaire affiché dans une cellule en édition en ligne.
#action-page-[actionName]	{ item, ids }	Surcharge le contenu du mode pleine page pour une action avec displayMode: 'page'.

Slots des Vues Détaillées et Fiches (CrudRemoteView)

Lorsque vous utilisez une action de type view (qui s'appuie sur <CrudRemoteView>) :

• #view-section-[actionName]-[sectionKey] : Surcharge une section entière de la vue. Reçoit { section, item, loading, refreshList, invalidateList, refreshPage, ActionButton }.
• #view-section-header-[actionName]-[sectionKey] : Surcharge uniquement le header/titre d'une section.
• #view-section-body-[actionName]-[sectionKey] : Surcharge le corps (.card-body) d'une section en conservant le conteneur.
• #view-prop-[actionName]-[propertyKey] (ou #view-prop-[propertyKey]) : Surcharge l'ensemble d'une propriété (le bloc label + valeur). Reçoit { prop, label, value, item, currentUrl, currentPath, refreshList, invalidateList, refreshPage, ActionButton }.
• #view-label-[actionName]-[propertyKey] (ou #view-label-[propertyKey]) : Surcharge uniquement le label d'une propriété (ex: ajout d'icône d'aide, tooltip, badge). Reçoit { prop, label, value, item, currentUrl, currentPath, ... }.
• #view-[actionName]-[propertyKey] (ou #view-[propertyKey]) : Surcharge la valeur d'une propriété spécifique. Reçoit { prop, label, value, item, currentUrl, currentPath, ... }.
• #view-tab-[actionName]-[tabKey] : Surcharge le contenu d'un onglet.

État de chargement (skeleton)

Pendant le chargement initial de l'item (fetchUrlTemplate défini, réponse pas encore reçue — typiquement lors d'un accès direct par URL ?action=view&id=42), <CrudRemoteView> affiche directement la structure de viewConfig (sections, onglets, libellés réels) avec un skeleton à la place des valeurs, sans saut de mise en page à l'arrivée des données. Les rafraîchissements ultérieurs conservent les données affichées (opacité réduite).

• Les slots de propriété et de valeur (#view-prop-*, #view-label-*, #view-*) ne sont pas rendus pendant cette phase : ils sont remplacés par le libellé + un skeleton.
• Les slots de section et d'onglet (#view-section-*, #view-section-header-*, #view-section-body-*, #view-tab-*) restent rendus et reçoivent un booléen loading ; l'item ne contient alors que les données du contexte (souvent l'id seul).
• <CrudViewProp> affiche automatiquement un skeleton à la place de la valeur dans une vue en chargement (ou si sa prop loading est vraie).
• <CrudSkeleton> (exporté) permet de construire vos propres placeholders ; useViewLoading() donne accès à l'état de chargement dans vos composants.

<template #view-section-body-view-page-0="{ item, loading }">
  <template v-if="loading">
    <CrudSkeleton style="width: 40%;" />
  </template>
  <CrudViewProp v-else label="Nom" :value="item.name" />
</template>

Sections bare : Dans la configuration d'une vue (viewConfig.sections), vous pouvez renseigner "bare": true (ou "card": false) pour qu'une section ne soit pas enveloppée dans un conteneur carte Bootstrap (card / card-body) et n'affiche aucun bandeau d'en-tête.

Boutons d'Action dans les Slots Custom (<CrudActionButton>)

Lorsque vous personnalisez un slot de vue, vous pouvez afficher le bouton d'une action configurée grâce au composant <CrudActionButton> (ou via la prop de slot ActionButton / CrudActionButton).

Le composant conserve automatiquement tous les contrôles (visibilité, confirmation, redirection).

Utilisation standard :

<template #view-default-rendezvous="{ item }">
  <div v-for="rdv in item.rendezvous" :key="rdv.id" class="d-flex justify-content-between align-items-center mb-2">
    <span>{{ rdv.date }} - {{ rdv.status }}</span>
    
    <!-- Affiche le bouton d'action complet pour ce RDV -->
    <CrudActionButton action="cancel_rdv" :item="rdv" />
  </div>
</template>

Personnalisation via props :

<CrudActionButton 
  action="edit_rdv" 
  :item="rdv" 
  customLabel="Modifier" 
  customStyle="outline-secondary" 
  size="sm" 
/>

Surcharge via slot interne optionnel :

<CrudActionButton action="delete_rdv" :item="rdv">
  <template #default="{ execute, isVisible, isPending, label, icon }">
    <button v-if="isVisible" @click="execute" class="btn btn-sm btn-link text-danger">
      <i :class="icon"></i> {{ label }}
    </button>
  </template>
</CrudActionButton>

Props de <CrudActionButton> :

Prop	Type	Défaut	Description
action	string | CrudAction	Requis	Nom de l'action ou objet CrudAction.
item	Record<string, any>	activeItem	Entité ciblée pour l'action.
location	string	undefined	Contexte d'emplacement pour le filtre show(item, context).
customLabel	string	action.label	Surcharge le texte du bouton.
customIcon	string	action.icon	Surcharge l'icône FontAwesome du bouton.
customStyle	string	action.style	Surcharge la couleur/style Bootstrap (ex: 'danger', 'outline-primary').
size	'sm' | 'md' | 'lg'	'sm'	Taille du bouton.
ignoreVisibility	boolean	false	Si true, ignore tous les contrôles de visibilité.
ignoreAllowedActions	boolean	false	Si true, ignore le filtre _allowed_actions.
ignoreShow	boolean	false	Si true, ignore la fonction action.show().

Slots des Modales d'Actions (CrudActionModal)

Pour les actions ayant displayMode: 'modal', de nombreux slots dynamiques permettent de surcharger chaque partie de la modale. Les propriétés exposées sont généralement { item, actionName, close, submit, success, reload, title }. Vous pouvez cibler toutes les actions (ex: #action-modal-content) ou une action spécifique (ex: #action-modal-content-[actionName]).

Nom du Slot	Description
#action-modal-layout	Remplace l'intégralité de la modale (header, corps, footer). Les styles par défaut de la modale sont ignorés.
#action-modal-header	Surcharge le titre et la croix de fermeture de la modale.
#action-modal-top	Ajoute du contenu juste au-dessus du composant de l'action.
#action-modal-content	Remplace le composant dynamique par votre propre contenu personnalisé.
#action-modal-bottom	Ajoute du contenu juste en-dessous du composant de l'action.
#action-modal-footer	Surcharge les boutons d'annulation et de validation en bas de la modale.

Astuce : Ajoutez le suffixe -[actionName] à n'importe lequel de ces slots pour cibler une action en particulier, par exemple #action-modal-content-delete-user.

Accessibilité : les slots #action-modal-layout et #action-modal-header reçoivent aussi titleId. Posez-le sur votre titre (<h2 :id="titleId">) : la modale y fait référence via aria-labelledby. Le focus initial cible le premier élément portant data-autofocus, sinon le premier élément focusable (hors bouton de fermeture marqué data-modal-close).

Slots des Formulaires Distants (CrudRemoteForm)

Pour les actions de type form, le composant interne chargé de l'affichage est un CrudRemoteForm. Celui-ci expose ses propres slots pour insérer du contenu interactif autour du formulaire.

Nom du Slot	Data exposées (v-slot="data")	Description
#remote-form-top	{ formData, formConfig, item, submit }	Insère du contenu juste avant le formulaire (utile pour des messages d'avertissement conditionnels).
#remote-form-bottom	{ formData, formConfig, item, submit }	Insère du contenu juste après le formulaire.

Astuce : Vous pouvez ajouter le suffixe -[actionName] pour cibler une action form en particulier, ex: #remote-form-top-edit-user.