Added transition to updating event

components/calendar/CalendarEvent.vue

@@ -60,7 +60,6 @@ function handleClosePopover() {
     </UiPopoverTrigger>
 
     <CalendarEventDetails
-      v-once
       :event
       :spans-multiple-days
       :is-start-event

components/calendar/form/UpdateEvent.vue

@@ -101,7 +101,7 @@ async function handleSubmit() {
           </div>
 
           <div class="text-right">
-            <UiButton size="sm">
+            <UiButton size="sm" type="submit">
               Sauvegarder
             </UiButton>
           </div>

components/calendar/state/monthly/DayTile.vue

@@ -107,9 +107,11 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
           'opacity-40': props.faded && !isSelectedDate
         }"
       >
-        <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
+        <TransitionGroup name="event">
-          <CalendarEventButton :event :tile-date="date" />
+          <li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
-        </li>
+            <CalendarEventButton :event :tile-date="date" />
+          </li>
+        </TransitionGroup>
 
         <li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
           <UiPopover>
@@ -159,4 +161,21 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     border-top-width: 1px;
   }
 }
+
+.event-enter-active {
+  transition: all 120ms ease-in-out;
+}
+.event-leave-active {
+  transition: all 180ms ease-in-out;
+}
+.event-enter-from,
+.event-leave-to {
+  opacity: 0;
+}
+.event-enter-from {
+  transform: translateX(.15rem);
+}
+.event-leave-to {
+  transform: translateX(-.5rem);
+}
 </style>