Merge pull request #3913 from buraksaglam089/issue-3864

imagePreview slot added

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.'
     }
 ];
 

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 {}

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>

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>