feat(modal): fix confirm and add notification

components/ConfirmationModal.vue

@@ -1,6 +1,10 @@
 <template>
-  <TransitionRoot as="template" :show="true">
-    <Dialog class="relative z-50">
+  <TransitionRoot
+    as="template"
+    :show="true"
+    :style="{ 'z-index': props.zHeight }"
+  >
+    <Dialog class="relative z-50" @close="emit('event', 'cancel')">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"
@@ -56,12 +60,12 @@
                   type="submit"
                   class="w-full sm:w-fit"
                 >
-                  Confirm
+                  {{ props.data.buttonText ?? "Confirm" }}
                 </LoadingButton>
                 <button
                   type="button"
                   class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-                  @click="emit('event', 'close')"
+                  @click="emit('event', 'cancel')"
                   ref="cancelButtonRef"
                 >
                   Cancel
@@ -82,12 +86,18 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
-import type { ModalDatas, ModalType } from "../composables/modal-stack";
+import type {
+  ModalDatas,
+  ModalEvents,
+  ModalType,
+} from "../composables/modal-stack";
 
 const props = defineProps<{
   zHeight: number;
   loading: boolean;
   data: ModalDatas[ModalType.Confirmation];
 }>();
-const emit = defineEmits<{ (e: "event", v: string): void }>();
+const emit = defineEmits<{
+  (e: "event", v: ModalEvents[ModalType.Confirmation]): void;
+}>();
 </script>