From cbfe7726cacbebe9067566ae4427305b046f42bf Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 23:36:32 +0200
Subject: [PATCH 01/21] =?UTF-8?q?=F0=9F=92=84=20Adding*=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/dialog.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/assets/style/primevue-style/dialog.css

diff --git a/src/assets/style/primevue-style/dialog.css b/src/assets/style/primevue-style/dialog.css
new file mode 100644
index 0000000..dbeb53e
--- /dev/null
+++ b/src/assets/style/primevue-style/dialog.css
@@ -0,0 +1,14 @@
+:root{
+  --p-dialog-background: var(--background-lifted-grey);
+  --p-dialog-border-color: var(--border-default-grey);
+  --p-dialog-color: var(--text-title-grey);
+  --p-dialog-border-radius: 0px;
+  --p-dialog-shadow: var(--shadow);
+  --p-dialog-header-padding: 1rem;
+  --p-dialog-header-gap: 0.5rem;
+  --p-dialog-title-font-size: var(--titles-H4-SM-size);
+  --p-dialog-title-font-weight: var( --titles-H4-SM-weight);
+  --p-dialog-content-padding: 0 1rem 1rem 1rem;
+  --p-dialog-footer-padding: 1rem;
+  --p-dialog-footer-gap: 1rem;
+}

From 255e7f5021e851c802ab3c390ce0752a28afdcfa Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 23:37:34 +0200
Subject: [PATCH 02/21] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 9a185a9..5709b60 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -16,3 +16,4 @@
 @import './primevue-style/fileupload.css';
 @import './primevue-style/scrollpanel.css';
 @import './primevue-style/toast.css';
+@import './primevue-style/dialog.css';

From 99d31824c02182eb438581b26077ab6f0459aa02 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 23:46:24 +0200
Subject: [PATCH 03/21] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Modal=20compon?=
 =?UTF-8?q?ent=20interface=20file=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/IVModal.type.ts | 69 ++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/modal/IVModal.type.ts

diff --git a/src/components/modal/IVModal.type.ts b/src/components/modal/IVModal.type.ts
new file mode 100644
index 0000000..fb3a050
--- /dev/null
+++ b/src/components/modal/IVModal.type.ts
@@ -0,0 +1,69 @@
+import type IVButton from '../button/IVButton.type';
+import type { DialogBreakpoints } from 'primevue/dialog';
+
+/**
+ * Interface representing the properties for a Modal component.
+ */
+export interface IModal {
+  /**
+   * Optional unique identifier for the modal element.
+   */
+  modalId?: string
+
+  /**
+   * Flag indicating whether the modal is currently open.
+   */
+  opened?: boolean
+
+  /**
+   * List of actions (buttons) displayed in the modal.
+   */
+  actions?: IVButton[]
+
+  /**
+   * Determines if the modal should behave like an alert dialog.
+   */
+  isAlert?: boolean
+
+  /**
+   * Reference to the originating element that triggered the modal,
+   * used to return focus when the modal is closed.
+   */
+  origin?: { focus: () => void }
+
+  /**
+   * Title displayed at the top of the modal.
+   */
+  title: string
+
+  /**
+   * Optional icon name or path to render next to the title.
+   */
+  icon?: string
+
+  /**
+   * Defines the modal size: 'sm' = small, 'md' = medium, 'lg' = large.
+   */
+  size?: 'sm' | 'md' | 'lg'
+
+  /**
+   * Accessible label (aria-label) for the close button.
+   */
+  closeButtonLabel?: string
+
+  /**
+   * Tooltip (title attribute) shown when hovering over the close button.
+   */
+  closeButtonTitle?: string
+}
+
+/**
+ * Extended Modal interface that includes configuration for responsive breakpoints.
+ */
+export default interface IVModal extends IModal {
+  /**
+   * Breakpoints used to control responsive modal behavior.
+   * Compatible with PrimeVue Dialog breakpoints format.
+   */
+  breakpoints?: DialogBreakpoints
+}

From dd5bc2fdb454fd317e08ae8b75e3ba003b62010d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 23:55:47 +0200
Subject: [PATCH 04/21] =?UTF-8?q?=E2=9C=A8=20feature:=20Modal=20component?=
 =?UTF-8?q?=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/modal/VModal.vue b/src/components/modal/VModal.vue
new file mode 100644
index 0000000..2bb305f
--- /dev/null
+++ b/src/components/modal/VModal.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import type IVModal from './IVModal.type';
+import { useId, computed } from 'vue';
+import VButtonGroup from '../button/VButtonGroup.vue';
+import VButton from '../button/VButton.vue';
+import styles from '@/assets/typography.module.css'
+
+const props = withDefaults(defineProps<IVModal>(), {
+  modalId: () => useId(),
+  actions: () => [],
+  icon: undefined,
+  size: 'md',
+  closeButtonLabel: 'Fermer',
+  closeButtonTitle: 'Fermer la fenêtre modale',
+  title: undefined,
+  opened: false,
+  isAlert: false,
+  breakpoints: undefined,
+})
+
+const role = computed(() => {
+  return props.isAlert ? 'alertdialog' : 'dialog'
+})
+
+const modalSize = computed(() => {
+  switch (props.size) {
+    case 'lg':
+      return `width: 49.5rem;`
+    case 'md':
+      return `width: 36.75rem;`
+    case 'sm':
+      return `width: 24rem;`
+    default:
+      return `width: 36.75rem;`
+  }
+})
+
+const emit = defineEmits(['update:opened'])
+
+const visible = computed({
+  get: () => props.opened,
+  set: (value: boolean) => emit('update:opened', value),
+})
+
+</script>
+
+<template>
+  <Dialog
+    :header="props.title"
+    id="modal"
+    modal
+    v-model:visible="visible"
+    :role="role"
+    :aria-model="true"
+    :aria-labelledby="`modal-${props.modalId}-dialog`"
+    ref="modal"
+    :style="modalSize"
+    :breakpoints="props.breakpoints"
+  >
+    <template #header>
+      <slot name="header" v-if="props.icon !== undefined">
+        <span :class="[styles['titles-H6-XXS']]">
+          <i :class="props.icon"></i>
+          {{ props.title }}
+        </span>
+      </slot>
+    </template>
+    <slot name="content"/>
+    <template #footer>
+      <slot name="footer">
+        <VButtonGroup
+          v-if="props.actions?.length"
+          inline-layout-when="always"
+          align="right"
+          :buttons="props.actions"
+          size="sm"
+          title="groupe de boutons"
+        />
+      </slot>
+    </template>
+    <template #closebutton="{closeCallback}">
+      <VButton
+        tertiary
+        noOutline
+        size="sm"
+        icon="ri-close-line"
+        iconRight
+        @click="closeCallback"
+        :label="closeButtonLabel"
+        :title="closeButtonTitle"
+        ref="closeBtn"
+        aria-controls="modal-1"
+        type="button"
+      />
+    </template>
+  </Dialog>
+</template>

From f1f5e1f36a5066ab480f076c7e286f21d0173ab9 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 00:11:26 +0200
Subject: [PATCH 05/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/VModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modal/VModal.vue b/src/components/modal/VModal.vue
index 2bb305f..ae27449 100644
--- a/src/components/modal/VModal.vue
+++ b/src/components/modal/VModal.vue
@@ -4,7 +4,7 @@ import type IVModal from './IVModal.type';
 import { useId, computed } from 'vue';
 import VButtonGroup from '../button/VButtonGroup.vue';
 import VButton from '../button/VButton.vue';
-import styles from '@/assets/typography.module.css'
+import styles from '@visua/typography.module.css';
 
 const props = withDefaults(defineProps<IVModal>(), {
   modalId: () => useId(),

From 80dc6e4161881bd7d7f3e8e2de1451a13892d468 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 00:12:07 +0200
Subject: [PATCH 06/21] Display some modal components

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0fec676..d29de5d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,8 @@
 // import VProgressBarView from '../template/VProgressBarView.vue';
 // import VMessageView from '../template/VMessageView.vue';
 // import VFileUploadView from '../template/VFileUploadView.vue';
-import VAlertView from '../template/VAlertView.vue';
+// import VAlertView from '../template/VAlertView.vue';
+import VModalView from '../template/VModalView.vue';
 </script>
 
 
@@ -26,5 +27,6 @@ import VAlertView from '../template/VAlertView.vue';
   <!-- <VProgressBarView/> -->
   <!-- <VMessageView/> -->
   <!-- <VFileUploadView/> -->
-  <VAlertView/>
+  <!-- <VAlertView/> -->
+   <VModalView/>
 </template>

From 24ea6cb51b42db8556d99f22f70ae9f864c369f3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 00:58:31 +0200
Subject: [PATCH 07/21] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20modal?=
 =?UTF-8?q?=20component=20improved?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/VModal.vue | 55 ++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/components/modal/VModal.vue b/src/components/modal/VModal.vue
index ae27449..db18711 100644
--- a/src/components/modal/VModal.vue
+++ b/src/components/modal/VModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Dialog from 'primevue/dialog';
 import type IVModal from './IVModal.type';
-import { useId, computed } from 'vue';
+import { useId, computed, watch, ref } from 'vue';
 import VButtonGroup from '../button/VButtonGroup.vue';
 import VButton from '../button/VButton.vue';
 import styles from '@visua/typography.module.css';
@@ -14,9 +14,17 @@ const props = withDefaults(defineProps<IVModal>(), {
   closeButtonLabel: 'Fermer',
   closeButtonTitle: 'Fermer la fenêtre modale',
   title: undefined,
-  opened: false,
+  visible: false,
   isAlert: false,
   breakpoints: undefined,
+  modal: true,
+  dismissableMask: false,
+  blockScroll: true,
+  position: 'center',
+  maximizable: false,
+  draggable: true,
+  showHeader: true,
+  closeOnEscape: true,
 })
 
 const role = computed(() => {
@@ -36,12 +44,28 @@ const modalSize = computed(() => {
   }
 })
 
-const emit = defineEmits(['update:opened'])
+const emit = defineEmits([
+  'update:visible',
+  'hide',
+  'after-hide',
+  'show',
+  'maximize',
+  'unmaximize',
+  'dragstart',
+  'dragend'
+]);
 
-const visible = computed({
-  get: () => props.opened,
-  set: (value: boolean) => emit('update:opened', value),
+const localVisible = ref(props.visible);
+watch(() => props.visible, (newVal) => {
+  if(localVisible.value !== newVal){
+    localVisible.value = newVal;
+  }
 })
+watch(localVisible, (newVal) => {
+  if(props.visible !== newVal){
+    emit('update:visible', newVal);
+  }
+});
 
 </script>
 
@@ -49,14 +73,29 @@ const visible = computed({
   <Dialog
     :header="props.title"
     id="modal"
-    modal
-    v-model:visible="visible"
+    :modal="props.modal"
+    :dismissable-mask="props.dismissableMask"
     :role="role"
     :aria-model="true"
     :aria-labelledby="`modal-${props.modalId}-dialog`"
     ref="modal"
     :style="modalSize"
     :breakpoints="props.breakpoints"
+    :block-scroll="props.blockScroll"
+    :position="props.position"
+    :maximizable="props.maximizable"
+    :draggable="props.draggable"
+    :show-header="props.showHeader"
+    :close-on-escape="props.closeOnEscape"
+    v-model:visible="localVisible"
+    @update:visible="emit('update:visible', $event)"
+    @after-hide="emit('after-hide', $event)"
+    @dragend="emit('dragend', $event)"
+    @dragstart="emit('dragstart', $event)"
+    @hide="emit('hide', $event)"
+    @maximize="emit('maximize', $event)"
+    @unmaximize="emit('unmaximize', $event)"
+    @show="emit('show', $event)"
   >
     <template #header>
       <slot name="header" v-if="props.icon !== undefined">

From 0fd7e1ed1f37ecd609c0ce6eec30bb6233359839 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 01:01:17 +0200
Subject: [PATCH 08/21] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Modal=20compon?=
 =?UTF-8?q?ent=20interface=20fileupdated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/IVModal.type.ts | 140 ++++++++++++++++++++++++++-
 1 file changed, 138 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/IVModal.type.ts b/src/components/modal/IVModal.type.ts
index fb3a050..253df63 100644
--- a/src/components/modal/IVModal.type.ts
+++ b/src/components/modal/IVModal.type.ts
@@ -1,5 +1,7 @@
+import type { HTMLAttributes } from 'vue';
 import type IVButton from '../button/IVButton.type';
-import type { DialogBreakpoints } from 'primevue/dialog';
+import { type DialogBreakpoints } from 'primevue';
+import type { HintedString } from '@primevue/core';
 
 /**
  * Interface representing the properties for a Modal component.
@@ -57,10 +59,144 @@ export interface IModal {
   closeButtonTitle?: string
 }
 
+/**
+ * Defines valid properties in Dialog component.
+ */
+export interface DialogProps {
+    /**
+     * Title content of the dialog.
+     */
+    header?: string | undefined;
+    /**
+     * Footer content of the dialog.
+     */
+    footer?: string | undefined;
+    /**
+     * Specifies the visibility of the dialog.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Defines if background should be blocked when dialog is displayed.
+     * @defaultValue false
+     */
+    modal?: boolean | undefined;
+    /**
+     * Style of the content section.
+     */
+    contentStyle?: unknown;
+    /**
+     * Style class of the content section.
+     */
+    contentClass?: unknown;
+    /**
+     * Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component.
+     */
+    contentProps?: HTMLAttributes | undefined;
+    /**
+     * Adds a close icon to the header to hide the dialog.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * Specifies if clicking the modal background should hide the dialog.
+     * @defaultValue false
+     */
+    dismissableMask?: boolean | undefined;
+    /**
+     * Specifies if pressing escape key should hide the dialog.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Whether to show the header or not.
+     * @defaultValue true
+     */
+    showHeader?: boolean | undefined;
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     * @defaultValue false
+     */
+    blockScroll?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Position of the dialog.
+     * @defaultValue center
+     */
+    position?: HintedString<'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'> | undefined;
+    /**
+     * Whether the dialog can be displayed full screen.
+     * @defaultValue false
+     */
+    maximizable?: boolean | undefined;
+    /**
+     * Object literal to define widths per screen size.
+     */
+    breakpoints?: DialogBreakpoints;
+    /**
+     * Enables dragging to change the position using header.
+     * @defaultValue true
+     */
+    draggable?: boolean | undefined;
+    /**
+     * Keeps dialog in the viewport when dragging.
+     * @defaultValue true
+     */
+    keepInViewport?: boolean | undefined;
+    /**
+     * Minimum value for the left coordinate of dialog in dragging.
+     * @defaultValue 0.
+     */
+    minX?: number | undefined;
+    /**
+     * Minimum value for the top coordinate of dialog in dragging.
+     * @defaultValue 0
+     */
+    minY?: number | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the dialog gets attached.
+     * @defaultValue body
+     */
+    appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+    /**
+     * Icon to display in the dialog close button.
+     */
+    closeIcon?: string | undefined;
+    /**
+     * Icon to display in the dialog maximize button when dialog is not maximized.
+     */
+    maximizeIcon?: string | undefined;
+    /**
+     * Icon to display in the dialog maximize button when dialog is minimized.
+     */
+    minimizeIcon?: string | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', rounded: true, text: true }
+     */
+    closeButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', rounded: true, text: true }
+     */
+    maximizeButtonProps?: object | undefined;
+}
+
 /**
  * Extended Modal interface that includes configuration for responsive breakpoints.
  */
-export default interface IVModal extends IModal {
+export default interface IVModal extends Partial<Omit<IModal, 'opened'>>, Partial<DialogProps> {
   /**
    * Breakpoints used to control responsive modal behavior.
    * Compatible with PrimeVue Dialog breakpoints format.

From 22e473b87c6c09f623ecd6900cf546cdaca47656 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 01:22:49 +0200
Subject: [PATCH 09/21] =?UTF-8?q?=E2=9C=85=20test:=20added=20test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VModal.spec.ts | 69 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 test/VModal.spec.ts

diff --git a/test/VModal.spec.ts b/test/VModal.spec.ts
new file mode 100644
index 0000000..d25fdd9
--- /dev/null
+++ b/test/VModal.spec.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import VModal from '../src/components/modal/VModal.vue';
+import type IVButton from '../src/components/button/IVButton.type';
+
+describe('VModal.vue', () => {
+  let actions: IVButton[];
+  let visible: boolean;
+
+  beforeEach(() => {
+    visible = true;
+    actions = [
+      {
+        label: 'Bouton primaire',
+        onClick: vi.fn(),
+        title: 'primaire',
+      },
+      {
+        label: 'Bouton secondaire',
+        secondary: true,
+        onClick: vi.fn(),
+        title: 'secondaire',
+      },
+      {
+        label: 'Bouton tertiaire',
+        tertiary: true,
+        onClick: vi.fn(),
+        title: 'tertiaire',
+      },
+    ];
+  });
+
+  it('emits update:visible when internal visibility changes', async () => {
+  const wrapper = mount(VModal, {
+    props: {
+      visible: true,
+      actions,
+    },
+  });
+
+  // Simulation d’un changement interne
+  await wrapper.vm.$emit('update:visible', false);
+  await nextTick();
+
+  const emitted = wrapper.emitted('update:visible');
+  expect(emitted).toBeTruthy();
+  expect(emitted?.[0]).toEqual([false]);
+
+});
+
+
+  it('emits lifecycle events (show/hide)', async () => {
+    const wrapper = mount(VModal, {
+      props: {
+        visible,
+        actions,
+      },
+    });
+
+    wrapper.vm.$emit('show');
+    wrapper.vm.$emit('hide');
+
+    await nextTick();
+
+    expect(wrapper.emitted('show')).toBeTruthy();
+    expect(wrapper.emitted('hide')).toBeTruthy();
+  });
+});

From 58450e70eed18d55143fb516861617618dbd8a14 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 08:25:35 +0200
Subject: [PATCH 10/21] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 5709b60..9b3a74c 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -17,3 +17,4 @@
 @import './primevue-style/scrollpanel.css';
 @import './primevue-style/toast.css';
 @import './primevue-style/dialog.css';
+@import './primevue-style/confirmdialog.css';

From 77f4e5460a7913a65a015d9c7cf1eecce07634ba Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 08:26:35 +0200
Subject: [PATCH 11/21] =?UTF-8?q?=F0=9F=92=84=20Adding*=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20confirm=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/confirmdialog.css | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/assets/style/primevue-style/confirmdialog.css

diff --git a/src/assets/style/primevue-style/confirmdialog.css b/src/assets/style/primevue-style/confirmdialog.css
new file mode 100644
index 0000000..65c6f8b
--- /dev/null
+++ b/src/assets/style/primevue-style/confirmdialog.css
@@ -0,0 +1,5 @@
+:root {
+  --p-confirmdialog-content-gap: 1rem;
+  --p-confirmdialog-icon-size: var(--titles-H6-XXS-size);
+  --p-confirmdialog-icon-color: var(--text-title-grey);
+}

From 88fd6ec0d21dc8a9afa49bd0320f2ec70eee7869 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 09:11:29 +0200
Subject: [PATCH 12/21] =?UTF-8?q?=E2=9C=A8=20feature:=20useConfirmModal=20?=
 =?UTF-8?q?composable=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composable/useConfirmModal.ts | 42 ++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/composable/useConfirmModal.ts

diff --git a/src/components/composable/useConfirmModal.ts b/src/components/composable/useConfirmModal.ts
new file mode 100644
index 0000000..85f58a7
--- /dev/null
+++ b/src/components/composable/useConfirmModal.ts
@@ -0,0 +1,42 @@
+import { type ConfirmationOptions } from "primevue/confirmationoptions";
+import { useConfirm } from "primevue";
+import VButton from "../button/VButton.vue";
+
+export function useConfirmModal() {
+  const confirm = useConfirm();
+
+  const showConfirmModal = ({
+    acceptProps = VButton,
+    rejectProps = VButton,
+    group = '',
+    header = '',
+    message = '',
+    icon = '',
+    accept = Function,
+    reject = Function,
+    onHide = Function,
+    onShow = Function,
+    modal = true,
+    blockScroll = true,
+    position = 'center',
+    appendTo = 'body',
+  }: ConfirmationOptions) => {
+    confirm.require({
+      group,
+      header,
+      message,
+      icon,
+      rejectProps,
+      acceptProps,
+      accept,
+      reject,
+      onHide,
+      onShow,
+      modal,
+      blockScroll,
+      position,
+      appendTo,
+    })
+  }
+  return {showConfirmModal}
+}

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 13/21] =?UTF-8?q?=E2=9C=A8=20feature:=20Confirm=20modal=20?=
 =?UTF-8?q?component=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>
+

From 28abd098cfac2a0c6687def3de898a2ae52c09e1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:20:09 +0200
Subject: [PATCH 14/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fixed=20bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 0197873..590d577 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,10 +3,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import primeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
+import ConfirmationService from 'primevue/confirmationservice'
 
 const app = createApp(App)
 
 app.use(primeVue)
 app.use(ToastService)
+app.use(ConfirmationService)
 
 app.mount('#app')

From d332fab643081c30ebacda8d9536773a9d4ae184 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:21:01 +0200
Subject: [PATCH 15/21] Display some confirm modal components

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d29de5d..a6a508f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,8 @@
 // import VMessageView from '../template/VMessageView.vue';
 // import VFileUploadView from '../template/VFileUploadView.vue';
 // import VAlertView from '../template/VAlertView.vue';
-import VModalView from '../template/VModalView.vue';
+// import VModalView from '../template/VModalView.vue';
+import VConfirmModalView from '../template/VConfirmModalView.vue';
 </script>
 
 
@@ -28,5 +29,6 @@ import VModalView from '../template/VModalView.vue';
   <!-- <VMessageView/> -->
   <!-- <VFileUploadView/> -->
   <!-- <VAlertView/> -->
-   <VModalView/>
+   <!-- <VModalView/> -->
+    <VConfirmModalView/>
 </template>

From 0732261793a53f01901377414af4705c7cebe85b Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:22:30 +0200
Subject: [PATCH 16/21] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20useCo?=
 =?UTF-8?q?nfirmModal=20composable=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composable/useConfirmModal.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/composable/useConfirmModal.ts b/src/components/composable/useConfirmModal.ts
index 85f58a7..0bf333b 100644
--- a/src/components/composable/useConfirmModal.ts
+++ b/src/components/composable/useConfirmModal.ts
@@ -1,4 +1,4 @@
-import { type ConfirmationOptions } from "primevue/confirmationoptions";
+import type { ConfirmationOptions } from "primevue/confirmationoptions";
 import { useConfirm } from "primevue";
 import VButton from "../button/VButton.vue";
 

From 0245e4df4a013b775bf13ae28e069a68d556bc33 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:25:32 +0200
Subject: [PATCH 17/21] =?UTF-8?q?=F0=9F=93=9D=20docs:=20Updated=20CHANGELO?=
 =?UTF-8?q?G=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce9fa83..25e2ece 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.12] - 2025-07-28
+### Added
+- Modal compoenent
+- Confirm modal component
+- useConfirmModal composable
+
 ## [1.0.11] - 2025-07-27
 ### Added
 - Alert compoenent

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

---
 src/components/modal/VConfirmModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/modal/VConfirmModal.vue b/src/components/modal/VConfirmModal.vue
index 4b067ab..1cb0459 100644
--- a/src/components/modal/VConfirmModal.vue
+++ b/src/components/modal/VConfirmModal.vue
@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<ConfirmDialogProps>(), {
     :group="props.group"
     :draggable="props.draggable"
     :breakpoints="props.breakpoints"
+    role="alert"
   >
     <template #container="slotProps">
       <div class="container">

From bb43b555769eb522f97b68ae75022f6bfcd6b5cf Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:32:06 +0200
Subject: [PATCH 19/21] =?UTF-8?q?=F0=9F=93=9D=20docs:=20README=20file=20up?=
 =?UTF-8?q?dated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7c32bf8..3ee4794 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # visua-vue
 
-**Current version: v1.0.11**
\ No newline at end of file
+**Current version: v1.0.12**
\ No newline at end of file

From d1eb29caa7e41a845575b1bbb94d5c412ce4463d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:33:27 +0200
Subject: [PATCH 20/21] 1.0.11 -> 1.0.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 249783b..75bb529 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "scripts": {
     "dev": "vite",

From 07371b4eea49326c766d4bd2229cbf73938e4769 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:33:47 +0200
Subject: [PATCH 21/21] 1.0.11 -> 1.0.12

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f60c67f..195d81c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cellule-financiere-pmo/visua-vue",
-      "version": "1.0.11",
+      "version": "1.0.12",
       "license": "ISC",
       "dependencies": {
         "@cellule-financiere-pmo/visua": "1.1.3",