✨ feature: Modal component added

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>