♻️ refactor: modal component improved

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