ZoomIn and zoomOut props added

api-generator/components/image.js

@@ -10,6 +10,18 @@ const ImageProps = [
         type: 'string',
         default: 'pi pi-eye',
         description: 'Custom indicator icon.'
+    },
+    {
+        name: 'zoomInDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-in button'
+    },
+    {
+        name: 'zoomOutDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-out button'
     }
 ];
 

components/lib/image/Image.d.ts

@@ -32,6 +32,16 @@ export interface ImageProps {
      * @defaultValue pi pi-eye
      */
     indicatorIcon?: string;
+    /**
+     * Disable the zoom-in button
+     * @defaultValue false
+     */
+    zoomInDisabled?: boolean | undefined;
+    /**
+     * Disable the zoom-out button
+     * @defaultValue false
+     */
+    zoomOutDisabled?: boolean | undefined;
 }
 
 /**

components/lib/image/Image.vue

@@ -21,13 +21,13 @@
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel">
                         <slot name="zoomout">
                             <SearchMinusIcon />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel">
                         <slot name="zoomin">
                             <SearchPlusIcon />
                         </slot>
@@ -92,6 +92,14 @@ export default {
         indicatorIcon: {
             type: String,
             default: undefined
+        },
+        zoomInDisabled: {
+            type: Boolean,
+            default: false
+        },
+        zoomOutDisabled: {
+            type: Boolean,
+            default: false
         }
     },
     mask: null,
@@ -126,7 +134,13 @@ export default {
         onPreviewImageClick() {
             this.previewClick = true;
         },
-        onMaskClick() {
+        onMaskClick(event) {
+            const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
+
+            if (isActionbarTarget) {
+                return;
+            }
+
             if (!this.previewClick) {
                 this.previewVisible = false;
                 this.rotate = 0;
@@ -192,6 +206,11 @@ export default {
             if (focusTarget) {
                 focusTarget.focus();
             }
+        },
+        hidePreview() {
+            this.previewVisible = false;
+            this.rotate = 0;
+            this.scale = 1;
         }
     },
     computed: {
@@ -213,8 +232,11 @@ export default {
         imagePreviewStyle() {
             return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
         },
-        zoomDisabled() {
-            return this.scale <= 0.5 || this.scale >= 1.5;
+        isZoomInDisabled() {
+            return this.zoomInDisabled || this.scale >= 1.5;
+        },
+        isZoomOutDisabled() {
+            return this.zoomOutDisabled || this.scale <= 0.5;
         },
         rightAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
@@ -298,6 +320,10 @@ export default {
     align-items: center;
 }
 
+.p-image-action.p-link[disabled] {
+    opacity: 0.5;
+}
+
 .p-image-preview {
     transition: transform 0.15s;
     max-width: 100vw;