From d0abb296933348cfe14e3b92a52348f9012087f7 Mon Sep 17 00:00:00 2001
From: Furkan Sezis <sezisfurkan24@gmail.com>
Date: Wed, 22 Mar 2023 16:40:31 +0300
Subject: [PATCH] Fixed #3771 -Image: Add Additional Toolbar Buttons

---
 api-generator/components/image.js | 22 +++++++++++++++++++++-
 components/image/Image.d.ts       | 20 ++++++++++++++++++++
 components/image/Image.vue        | 24 +++++++++++++++++++-----
 3 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index 71cd2426d..fdb187f2c 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -25,7 +25,27 @@ const ImageEvents = [
 const ImageSlots = [
     {
         name: 'indicator',
-        description: 'Custom content for the preview indicator'
+        description: 'Custom content for the preview indicator.'
+    },
+    {
+        name: 'refresh',
+        description: 'Custom content for the component refresh.'
+    },
+    {
+        name: 'undo',
+        description: 'Custom content for the component undo.'
+    },
+    {
+        name: 'zoomout',
+        description: 'Custom content for the component zoomout.'
+    },
+    {
+        name: 'zoomin',
+        description: 'Custom content for the component zoomin.'
+    },
+    {
+        name: 'close',
+        description: 'Custom content for the component close.'
     }
 ];
 
diff --git a/components/image/Image.d.ts b/components/image/Image.d.ts
index 4125d2464..386e61086 100644
--- a/components/image/Image.d.ts
+++ b/components/image/Image.d.ts
@@ -37,6 +37,26 @@ export interface ImageSlots {
      * Custom indicator template.
      */
     indicator(): VNode[];
+    /**
+     * Custom refresh template.
+     */
+    refresh(): VNode[];
+    /**
+     * Custom undo template.
+     */
+    undo(): VNode[];
+    /**
+     * Custom zoomout template.
+     */
+    zoomout(): VNode[];
+    /**
+     * Custom zoomin template.
+     */
+    zoomin(): VNode[];
+    /**
+     * Custom close template.
+     */
+    close(): VNode[];
 }
 
 export interface ImageEmits {}
diff --git a/components/image/Image.vue b/components/image/Image.vue
index d757dce2f..00333598b 100644
--- a/components/image/Image.vue
+++ b/components/image/Image.vue
@@ -10,19 +10,33 @@
             <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown">
                 <div class="p-image-toolbar">
                     <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
-                        <i class="pi pi-refresh"></i>
+                        <slot name="refresh">
+                            <i class="pi pi-refresh"></i>
+                        </slot>
                     </button>
+
                     <button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
-                        <i class="pi pi-undo"></i>
+                        <slot name="undo">
+                            <i class="pi pi-undo"></i>
+                        </slot>
                     </button>
+
                     <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
-                        <i class="pi pi-search-minus"></i>
+                        <slot name="zoomout">
+                            <i class="pi pi-search-minus"></i>
+                        </slot>
                     </button>
+
                     <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
-                        <i class="pi pi-search-plus"></i>
+                        <slot name="zoomin">
+                            <i class="pi pi-search-plus"></i>
+                        </slot>
                     </button>
+
                     <button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
-                        <i class="pi pi-times"></i>
+                        <slot name="close">
+                            <i class="pi pi-times"></i>
+                        </slot>
                     </button>
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">