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.

- 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.

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.

- 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 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 — quand vous avez vraiment besoin de votre propre JavaScript.
• Composants de données — l'édition inline de data-table.
• Animations — les jetons de mouvement employés par ces animations.
• Composants de superposition — les toasts et dialogues levés par les gestionnaires.
• Automatisations — ce que lance action.type: automation.