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] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Modal=20component=20?=
 =?UTF-8?q?interface=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.