Refactor #5682, #5683 - For Image

primefaces · May 6, 2024 · 2eec11b · 2eec11b
1 parent 262fcf0
commit 2eec11b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/components/lib/image/BaseImage.vue b/components/lib/image/BaseImage.vue
@@ -34,6 +34,10 @@ export default {
             type: String,
             default: undefined
         },
+        previewIcon: {
+            type: String,
+            default: undefined
+        },
         zoomInDisabled: {
             type: Boolean,
             default: false

diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
@@ -186,9 +186,13 @@ export interface ImageProps {
     imageClass?: any;
     /**
      * Custom indicator icon.
-     * @deprecated since v3.27.0. Use 'indicatoricon' slot.
+     * @deprecated since v4.0. Use 'previewIcon' prop instead.
      */
-    indicatorIcon?: string;
+    indicatorIcon?: string | undefined;
+    /**
+     * Custom indicator icon.
+     */
+    previewIcon?: string | undefined;
     /**
      * Disable the zoom-in button
      * @defaultValue false
@@ -227,6 +231,11 @@ export interface ImageSlots {
     /**
      * Custom indicator template.
      */
+    previewicon(): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'previewicon' slot instead.
+     * Custom indicator template.
+     */
     indicatoricon(): VNode[];
     /**
      * Custom refresh template.
@@ -272,6 +281,7 @@ export interface ImageSlots {
         errorCallback: () => void;
     }): VNode[];
     /**
+     * @deprecated since v4.0. use 'original' slot instead.
      * Custom preview template.
      * @param {Object} scope - preview slot's params.
      */
@@ -294,6 +304,29 @@ export interface ImageSlots {
          */
         previewCallback: () => void;
     }): VNode[];
+    /**
+     * Custom original template.
+     * @param {Object} scope - original slot's params.
+     */
+    original(scope: {
+        /**
+         * Style class of the original image element.
+         */
+        class: any;
+        /**
+         * Style of the original image element.
+         */
+        style: any;
+        /**
+         * Original click function.
+         * @deprecated since v3.39.0. Use 'previewCallback' property instead.
+         */
+        onClick: () => void;
+        /**
+         * Preview click function.
+         */
+        previewCallback: () => void;
+    }): VNode[];
 }
 
 export interface ImageEmits {}

diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
@@ -4,8 +4,9 @@
             <img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
         <button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('previewMask')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('previewMask') }">
-            <slot name="indicatoricon">
-                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
+            <!-- TODO: indicator* deprecated since v4.0-->
+            <slot :name="$slots.previewicon ? 'previewicon' : 'indicatoricon'">
+                <component :is="previewIcon || indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
             </slot>
         </button>
         <Portal>
@@ -43,7 +44,8 @@
                 </div>
                 <transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
                     <div v-if="previewVisible" v-bind="ptm('originalContainer')">
-                        <slot name="preview" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
+                        <!-- TODO: preview deprecated since v4.0-->
+                        <slot :name="$slots.original ? 'original' : 'preview'" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
                             <img :src="$attrs.src" :class="cx('original')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('original')" />
                         </slot>
                     </div>

diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
@@ -1,13 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            An eye icon is displayed by default when the image is hovered in preview mode, use the <i>indicatoricon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
+            An eye icon is displayed by default when the image is hovered in preview mode, use the <i>previewicon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
             image respectively.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
-            <template #indicatoricon>
+            <template #previewicon>
                 <i class="pi pi-search"></i>
             </template>
             <template #image>
@@ -28,7 +28,7 @@ export default {
             code: {
                 basic: `
 <Image alt="Image" preview>
-    <template #indicatoricon>
+    <template #previewicon>
         <i class="pi pi-search"></i>
     </template>
     <template #image>
@@ -43,7 +43,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
-            <template #indicatoricon>
+            <template #previewicon>
                 <i class="pi pi-search"></i>
             </template>
             <template #image>
@@ -60,7 +60,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
-            <template #indicatoricon>
+            <template #previewicon>
                 <i class="pi pi-search"></i>
             </template>
             <template #image>