From 85df7a558dc54129eeb5b9b842fe23945743899a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 3 May 2023 20:54:50 +0300
Subject: [PATCH] Fixed #3864 - Image: New image and preview slots

---
 api-generator/components/image.js |  6 +++++-
 components/lib/image/Image.d.ts   | 34 +++++++++++++++++++++++++++++--
 components/lib/image/Image.vue    |  7 +++++--
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index b769fc84f..2e1ba17b1 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -54,7 +54,11 @@ const ImageSlots = [
         description: 'Custom content for the component close.'
     },
     {
-        name: 'imagePreview',
+        name: 'image',
+        description: 'Custom content for the component image.'
+    },
+    {
+        name: 'preview',
         description: 'Custom content for the component preview.'
     }
 ];
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index af5a5e7d9..3148dc01c 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -62,10 +62,40 @@ export interface ImageSlots {
      * Custom close template.
      */
     close(): VNode[];
-     /**
+    /**
+     * Custom image template.
+     */
+    image(scope: {
+        /**
+         * Style class of the image element.
+         */
+        class: any;
+        /**
+         * Style of the image element.
+         */
+        style: any;
+        /**
+         * Image error function.
+         */
+        onError: void;
+    }): VNode[];
+    /**
      * Custom preview template.
      */
-     imagePreview(): VNode[];
+    preview(scope: {
+        /**
+         * Style class of the preview image element.
+         */
+        class: any;
+        /**
+         * Style of the preview image element.
+         */
+        style: any;
+        /**
+         * Preview click function.
+         */
+        onClick: void;
+    }): VNode[];
 }
 
 export interface ImageEmits {}
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index 3745b4324..ad9bdde14 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -1,6 +1,8 @@
 <template>
     <span :class="containerClass" :style="style">
-        <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
+        <slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
+            <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
+        </slot>
         <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
             <slot name="indicatoricon">
                 <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
@@ -41,7 +43,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
                     <div v-if="previewVisible">
-                        <slot name="imagePreview" :previewImageClick="onPreviewImageClick" :imagePreviewStyle="imagePreviewStyle">
+                        <slot name="preview" class="p-image-preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
                             <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
                         </slot>
                     </div>
@@ -158,6 +160,7 @@ export default {
         rotateRight() {
             this.rotate += 90;
             this.previewClick = true;
+            console.log('kdnwjknkj');
         },
         rotateLeft() {
             this.rotate -= 90;