From fc6230c29a2fe8f4431ad598a7a2cacfc947f8d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20Sa=C4=9Flam?= <bsaglam089@gmail.com>
Date: Sat, 29 Apr 2023 21:43:56 +0300
Subject: [PATCH] imagePreview slot added

---
 api-generator/components/image.js | 4 ++++
 components/lib/image/Image.d.ts   | 4 ++++
 components/lib/image/Image.vue    | 4 +++-
 doc/image/PreviewDoc.vue          | 7 ++++++-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index d5966f3a6..b769fc84f 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -52,6 +52,10 @@ const ImageSlots = [
     {
         name: 'close',
         description: 'Custom content for the component close.'
+    },
+    {
+        name: 'imagePreview',
+        description: 'Custom content for the component preview.'
     }
 ];
 
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index b20a3e0b5..af5a5e7d9 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -62,6 +62,10 @@ export interface ImageSlots {
      * Custom close template.
      */
     close(): VNode[];
+     /**
+     * Custom preview template.
+     */
+     imagePreview(): VNode[];
 }
 
 export interface ImageEmits {}
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index a5562d497..3745b4324 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -41,7 +41,9 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
                     <div v-if="previewVisible">
-                        <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
+                        <slot name="imagePreview" :previewImageClick="onPreviewImageClick" :imagePreviewStyle="imagePreviewStyle">
+                            <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
+                        </slot>
                     </div>
                 </transition>
             </div>
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 0b71bdaf9..5d58eaf3a 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -3,8 +3,13 @@
         <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview>
+            <template #imagePreview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" :style="slotProps.imagePreviewStyle" @click="slotProps.previewImageClick" />
+            </template>
+        </Image>
     </div>
+
     <DocSectionCode :code="code" />
 </template>