# Interactions et sauvegarde automatique Deux modules couvrent presque tout ce qu'une page Sovrium fait dans le navigateur sans que vous écriviez de JavaScript : `interactions` attache un comportement à un composant, et `action` dit ce que son exécution provoque. La sauvegarde automatique en édition inline s'appuie sur les deux. ```yaml - type: button content: Save interactions: click: { animation: pulse, submitForm: settings-form } action: type: crud operation: update table: settings onSuccess: { type: message, toast: { variant: success, message: 'Saved' } } ``` ## Le module `interactions` `interactions` porte quatre déclencheurs indépendants. Chacun est optionnel et ils se combinent librement. | Déclencheur | Se déclenche quand | | ----------- | ---------------------------------------- | | `click` | Le composant est cliqué. | | `hover` | Le pointeur survole le composant. | | `scroll` | Le composant entre dans la zone visible. | | `entrance` | La page se charge. | :::callout **Ces clés n'ont pas de préfixe `on`.** C'est `interactions.click`, pas `interactions.onClick`. Une clé préfixée par `on` est ignorée au décodage : l'interaction passe donc la validation puis ne se déclenche jamais. ::: ### `click` | Propriété | Description | | --------------- | ----------------------------------------------------------- | | `animation` | `pulse`, `bounce`, `shake`, `flash`, `ripple` ou `none`. | | `navigate` | Route interne ou ancre de la même page vers laquelle aller. | | `openUrl` | URL externe à ouvrir. | | `openInNewTab` | Ouvrir `openUrl` dans un nouvel onglet. | | `scrollTo` | Identifiant d'élément vers lequel défiler en douceur. | | `toggleElement` | Identifiant d'élément à afficher ou masquer. | | `submitForm` | Identifiant de formulaire à soumettre. | | `modal` | Identifiant de modale à ouvrir. | Les comportements se combinent : jouer une animation, puis naviguer. ### `hover` | Propriété | Description | | ----------------- | ------------------------------------------------------------ | | `scale` | Facteur d'échelle uniforme au survol. | | `transform` | Transformation CSS au survol. | | `opacity` | Opacité de 0 à 1. | | `backgroundColor` | Couleur de fond au survol. | | `color` | Couleur de texte au survol. | | `borderColor` | Couleur de bordure au survol. | | `shadow` | Ombre portée au survol. | | `duration` | Durée de la transition. `0` applique l'effet instantanément. | | `easing` | `linear`, `ease`, `ease-in`, `ease-out` ou `ease-in-out`. | Tous les effets de survol s'appliquent ensemble, sur une transition coordonnée. ### `scroll` | Propriété | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | `animation` | **Obligatoire.** `fadeIn`, `fadeInUp`, `fadeInDown`, `fadeInLeft`, `fadeInRight`, `zoomIn`, `slideInUp`, `slideInDown`. | | `threshold` | Fraction de l'élément visible avant déclenchement, de 0 à 1. | | `delay` | Délai avant le début de l'animation. | | `duration` | Durée de l'animation. | | `once` | Ne déclencher qu'à la première entrée, plutôt qu'à chaque retour. | ### `entrance` | Propriété | Description | | ----------- | ------------------------------------------------------------------------------------------ | | `animation` | **Obligatoire.** `fadeIn`, `fadeInUp`, `fadeInDown`, `zoomIn`, `slideInUp`, `slideInDown`. | | `delay` | Délai avant le début de l'animation. | | `duration` | Durée de l'animation. | | `stagger` | Délai entre les animations de composants frères, p. ex. `50ms`. | `entrance` se déclenche une fois au chargement ; `scroll` se déclenche à l'entrée dans la zone visible et c'est lui qui accepte `threshold` et `once`. ## Actions et gestionnaires de réponse Une `action` dit ce que fait un bouton ou un formulaire — `crud`, `auth`, `navigate` ou `automation` — et `onSuccess` / `onError` disent ce qui se passe ensuite. Une action `crud` exige `operation` (`create`, `update`, `delete`) **et** `table`. `confirm` la place derrière un dialogue, `confirmMessage` en fournissant le texte. Le `type` d'un gestionnaire de réponse vaut `navigate`, `reset`, `message`, `successPage` ou `role-landing`. À ses côtés, `toast` affiche une notification (`variant` valant `success`, `error`, `warning` ou `info`), `message` et `title` fixent le texte inline, et `actions` rend des boutons de suivi sur une page de succès. ```yaml - type: button content: Delete action: type: crud operation: delete table: tasks confirm: true confirmMessage: 'Delete this task? This cannot be undone.' onSuccess: { type: navigate, navigate: /tasks } onError: { type: message, toast: { variant: error, message: 'Delete failed' } } ``` `action.type: automation` invoque une [automatisation](/fr/docs/automations-overview) nommée. ## Sauvegarde automatique Les composants de données prennent en charge la sauvegarde automatique en édition inline via le module `autoSave`, le plus souvent sur `data-table`. | Propriété | Description | | ----------------------- | -------------------------------------------------------------------------------------------- | | `saveMode` | `manual` (défaut), `auto` (avec anti-rebond) ou `onBlur`. | | `autoSaveDebounceMs` | Délai après la dernière frappe. Défaut 500, minimum 100. | | `showSaveIndicator` | Afficher l'état Inactif / Enregistrement / Enregistré / Erreur, avec reprise en cas d'échec. | | `saveIndicatorPosition` | `inline`, `toast` ou `toolbar`. | | `saveAction` | Remplace l'action utilisée pour persister la modification. | Seule la cellule modifiée est envoyée dans la charge utile `PATCH`, les modifications rapides sont regroupées en une requête, et quitter la page vide immédiatement ce qui reste en attente. ## `reorderable-list` Une liste dont les éléments peuvent être réordonnés au glisser ou au clavier, déclenchant une action au changement d'ordre. | Propriété | Description | | ------------ | ------------------------------------------------ | | `dataSource` | Liaison de table optionnelle pour les éléments. | | `children` | Les éléments, chacun rendu avec une poignée. | | `onReorder` | Action invoquée une fois le nouvel ordre établi. | ## Pages connexes - [Scripts](/fr/docs/interactivity-scripts) — quand vous avez vraiment besoin de votre propre JavaScript. - [Composants de données](/fr/docs/data-components) — l'édition inline de `data-table`. - [Animations](/fr/docs/animations) — les jetons de mouvement employés par ces animations. - [Composants de superposition](/fr/docs/overlay-components) — les toasts et dialogues levés par les gestionnaires. - [Automatisations](/fr/docs/automations-overview) — ce que lance `action.type: automation`.