project - view pdf in dialog working. Open and close working

src/components/project/client-brief/PdfViewer.vue

@@ -6,6 +6,7 @@
     :draggable="false"
     header="Titre du PDF"
     class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
+    :closeOnEscape="true"
   >
     <template #header>
       <a class="btn">Valider et envoyer le brief</a>
@@ -15,7 +16,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        :src="src"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -26,11 +27,21 @@
 <script setup>
 import Dialog from "primevue/dialog";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import { ref, watch } from "vue";
+
+const { src } = defineProps({
+  src: String,
+});
+
+const emit = defineEmits("close");
 
 const licenseKey = import.meta.env.VITE_VPV_LICENSE;
 useLicense({ licenseKey });
 
-const isOpen = true;
+const isOpen = ref(true);
+watch(isOpen, (newValue) => {
+  emit("close");
+});
 
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -73,7 +84,7 @@ const onPdfLoaded = () => {
 
 <style>
 #add-pdf {
-  --max-w: min(100vw - var(--gutter) * 2, 77rem); 
+  --max-w: min(100vw - var(--gutter) * 2, 77rem);
   --max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
   --header-h: 4.5rem;
   max-width: var(--max-w);
@@ -152,7 +163,9 @@ const onPdfLoaded = () => {
   --vpv-input-border-color: var(--color-white);
   --vpv-input-placeholder-color: #596673;
   /* Modal of PDF Properties */
-  --vpv-properties-content-background: var(--vpv-dropdown-menu-content-background);
+  --vpv-properties-content-background: var(
+    --vpv-dropdown-menu-content-background
+  );
   --vpv-properties-content-secondary-color: #c6ccd2;
   --vpv-properties-content-color: var(--vpv-toolbar-color);
   --vpv-properties-separator: var(--vpv-dropdown-separator);