✨ feature: Confirm modal component added

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>
+