Merge pull request #3788 from sezisfurkan/issue-3771

Image: Add Additional Toolbar Buttons

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

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

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">