From d1138efb5ace5ebb481cac1711a1f1865844de42 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:19:38 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20Confirm=20modal=20compon?=
 =?UTF-8?q?ent=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/VConfirmModal.vue | 67 ++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/modal/VConfirmModal.vue

diff --git a/src/components/modal/VConfirmModal.vue b/src/components/modal/VConfirmModal.vue
new file mode 100644
index 0000000..4b067ab
--- /dev/null
+++ b/src/components/modal/VConfirmModal.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import ConfirmDialog from 'primevue/confirmdialog';
+import type { ConfirmDialogProps } from 'primevue/confirmdialog';
+import VButtonGroup from '../button/VButtonGroup.vue';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+  group: '',
+  draggable: true,
+  breakpoints: undefined,
+})
+</script>
+
+<template>
+  <ConfirmDialog
+    :group="props.group"
+    :draggable="props.draggable"
+    :breakpoints="props.breakpoints"
+  >
+    <template #container="slotProps">
+      <div class="container">
+        <div
+          class='header'
+          :class="[styles['titles-H6-XXS']]"
+          :style="('danger' in slotProps.message.acceptProps) ? {color: 'var(--text-default-error)'} : {color: 'var(--text-default-warning)'}"
+        >
+          <i :class="slotProps.message.icon" style="font-weight:lighter;"></i>
+          <span style="width: 100%;">{{ slotProps.message.header }}</span>
+        </div>
+        <span>{{ slotProps.message.message }}</span>
+          <VButtonGroup
+            :title="slotProps.message.group"
+            inline-layout-when="always"
+            size="sm"
+            align="right"
+            :buttons="[
+              {
+                ...slotProps.message.acceptProps,
+                onclick: slotProps.acceptCallback
+              },
+              {
+                ...slotProps.message.rejectProps,
+                onclick: slotProps.rejectCallback
+              }
+            ]"
+          />
+        </div>
+    </template>
+  </ConfirmDialog>
+</template>
+
+<style lang="css" scoped>
+.container{
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.header{
+  display: flex;
+  flex-direction: row;
+  gap: var(--p-dialog-header-gap);
+  align-items: baseline;
+}
+</style>
+