Added cancel action for dialog create

components/calendar/dialog/Create.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { PhX } from '@phosphor-icons/vue';
 import type { World } from '~/models/World';
 
 defineProps<{
@@ -11,6 +12,12 @@ const calendarSkeletonName = ref<string>('')
 function onChangedName(newName: string) {
   calendarSkeletonName.value = newName
 }
+
+const emit = defineEmits(['on-close'])
+
+function handleCancel() {
+  emit('on-close')
+}
 </script>
 
 <template>
@@ -18,7 +25,8 @@ function onChangedName(newName: string) {
     <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
       <UiAlertDialogTitle>
         <span class="text-2xl">
-          <strong class="font-bold">{{ world.name }}</strong> —
+          <strong class="font-bold">{{ world.name }}</strong>
+          <span class="opacity-30"> — </span>
           <span v-if="calendarSkeletonName">
             {{ calendarSkeletonName }}
           </span>
@@ -26,7 +34,11 @@ function onChangedName(newName: string) {
         </span>
       </UiAlertDialogTitle>
 
-      <CalendarFormCreate @changed-name="onChangedName" />
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleCancel">
+        <PhX size="20" />
+      </UiButton>
+
+      <CalendarFormCreate @on-changed-name="onChangedName" @on-cancel="handleCancel" />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

components/calendar/form/Create.vue

@@ -12,10 +12,6 @@ onMounted(() => {
 type FormTabs = 'global' | 'months' | 'today'
 const activeTab = ref<FormTabs>('global')
 
-/**
- * === Months list handling ===
- */
-
 /**
  * === Current date ===
  */
@@ -48,13 +44,19 @@ async function handleSubmit() {
  */
 const emit = defineEmits<{
   // eslint-disable-next-line no-unused-vars
-  (e: 'changed-name', calendarName: string): void
+  (e: 'on-changed-name', calendarName: string): void
+    // eslint-disable-next-line no-unused-vars
+  (e: 'on-cancel'): void
 }>()
 
 /** Hook to emit a debounced event for the changed skeleton name */
 const handleNameChange = useDebounceFn(() => {
-  emit('changed-name', calendarSkeleton.value.name)
+  emit('on-changed-name', calendarSkeleton.value.name)
 }, 400)
+
+function handleFormCancel() {
+  emit('on-cancel')
+}
 </script>
 
 <template>
@@ -101,7 +103,10 @@ const handleNameChange = useDebounceFn(() => {
         </UiTabsContent>
       </UiTabs>
 
-      <footer class="text-right mt-6">
+      <footer class="flex justify-end gap-2 mt-6">
+        <UiButton type="button" variant="destructive" @click="handleFormCancel">
+          Annuler
+        </UiButton>
         <UiButton type="submit" :disabled="!validSkeleton">
           Créer
         </UiButton>

pages/i/world/[id].vue

@@ -26,6 +26,10 @@ watch(user, (n, _o) => {
 })
 
 const alertModalOpened = ref<boolean>(false)
+
+function handleDialogClose() {
+  alertModalOpened.value = false
+}
 </script>
 
 <template>
@@ -54,7 +58,7 @@ const alertModalOpened = ref<boolean>(false)
                     <PhPlus size="17"/>
                   </UiButton>
                 </UiTooltipTrigger>
-                <UiTooltipContent>
+                <UiTooltipContent :side-offset="10">
                   <p>Ajouter un calendrier</p>
                 </UiTooltipContent>
               </UiTooltip>
@@ -87,6 +91,6 @@ const alertModalOpened = ref<boolean>(false)
       </section>
     </template>
 
-    <CalendarDialogCreate :world :modal-state="alertModalOpened" />
+    <CalendarDialogCreate :world :modal-state="alertModalOpened" @on-close="handleDialogClose" />
   </main>
 </template>