Removed redundant data pass

components/calendar/Calendar.vue

@@ -7,9 +7,6 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-const { isEditEventModalOpen, isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
-
 const route = useRoute()
 const worldId = route.params.id
 
@@ -110,8 +107,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
-    <CalendarFormUpdateEvent v-model:model-value="isEditEventModalOpen" />
-    <CalendarFormDeleteEvent v-model:model-value="isDeleteEventModalOpen" />
+    <CalendarSearch />
+    <CalendarFormUpdateEvent />
+    <CalendarFormDeleteEvent />
   </div>
 </template>

components/calendar/form/DeleteEvent.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-const isModalOpened = defineModel<boolean>({ default: false })
+const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
+
 const { resetSkeleton, deleteEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
@@ -8,7 +9,7 @@ const formErrors = reactive<{ message: string | null }>({
 })
 
 // Watch the popover state
-watch(isModalOpened, (hasOpened, _o) => {
+watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
@@ -20,7 +21,7 @@ async function handleSubmit() {
   try {
     await deleteEventFromSkeleton()
 
-    isModalOpened.value = false
+    isDeleteEventModalOpen.value = false
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -30,20 +31,20 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isModalOpened" :modal="true">
-    <UiDialogContent
+  <UiAlertDialog v-model:open="isDeleteEventModalOpen" :modal="true">
+    <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96 bg-slate-900 border-slate-800"
     >
-      <UiDialogTitle> Supprimer l'évènement</UiDialogTitle>
+      <UiAlertDialogTitle> Supprimer l'évènement</UiAlertDialogTitle>
 
-      <UiDialogDescription>
+      <UiAlertDialogDescription>
         Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !
-      </UiDialogDescription>
+      </UiAlertDialogDescription>
 
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">
@@ -60,6 +61,6 @@ async function handleSubmit() {
           </div>
         </div>
       </form>
-    </UiDialogContent>
-  </UiDialog>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
 </template>

components/calendar/form/UpdateEvent.vue

@@ -2,7 +2,8 @@
 import { PhAlarm } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
-const isModalOpened = defineModel<boolean>({ default: false })
+const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
+
 const { resetSkeleton, updateEventFromSkeleton } = useCalendarEvents()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
 
@@ -11,7 +12,7 @@ const formErrors = reactive<{ message: string | null }>({
 })
 
 // Watch the popover state
-watch(isModalOpened, (hasOpened, _o) => {
+watch(isEditEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
     eventSkeleton.value = { ...lastActiveEvent.value }
   } else {
@@ -23,7 +24,7 @@ async function handleSubmit() {
   try {
     await updateEventFromSkeleton()
 
-    isModalOpened.value = false
+    isEditEventModalOpen.value = false
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
@@ -33,8 +34,8 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isModalOpened" :modal="true">
-    <UiDialogContent
+  <UiAlertDialog v-model:open="isEditEventModalOpen" :modal="true">
+    <UiAlertDialogContent
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
@@ -43,11 +44,11 @@ async function handleSubmit() {
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
     >
       <VisuallyHidden>
-        <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
+        <UiAlertDialogTitle> Modifier l'évènement</UiAlertDialogTitle>
 
-        <UiDialogDescription>
+        <UiAlertDialogDescription>
           Mettre à jour les données de l'évènement
-        </UiDialogDescription>
+        </UiAlertDialogDescription>
       </VisuallyHidden>
 
       <form @submit.prevent="handleSubmit">
@@ -100,13 +101,16 @@ async function handleSubmit() {
             </span>
           </div>
 
-          <div class="text-right">
+          <div class="flex gap-2 justify-end">
+            <UiButton size="sm" type="button" variant="secondary">
+              Annuler
+            </UiButton>
             <UiButton size="sm" type="submit">
               Sauvegarder
             </UiButton>
           </div>
         </div>
       </form>
-    </UiDialogContent>
-  </UiDialog>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
 </template>

components/calendar/search/CalendarSearch.vue

@@ -27,10 +27,9 @@ import {
 import SearchList from './lists/SearchList.vue'
 import type { Category } from '~/models/Category'
 
-const { characters } = storeToRefs(useCharacters())
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 const { allEvents } = storeToRefs(useCalendarEvents())
-
-const modalOpen = defineModel<boolean>({ default: false })
+const { characters } = storeToRefs(useCharacters())
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -170,14 +169,14 @@ function resetSearch() {
  * Opens the search Uidialog
  */
 function openUiDialog() {
-  modalOpen.value = true
+  isAdvancedSearchOpen.value = true
 }
 
 /**
  * Closes the search Uidialog
  */
 function closeUiDialog() {
-  modalOpen.value = false
+  isAdvancedSearchOpen.value = false
 }
 
 /**
@@ -233,7 +232,7 @@ function handleCategorySelect(e: (Category)) {
 </script>
 
 <template>
-  <UiDialog v-model:open="modalOpen" @update:open="resetSearch()">
+  <UiDialog v-model:open="isAdvancedSearchOpen" @update:open="resetSearch()">
     <UiDialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{