Refactor #3918 - For Image

api-generator/components/image.js

@@ -10,6 +10,12 @@ const ImageProps = [
         type: 'string',
         default: 'pi pi-eye',
         description: 'Custom indicator icon.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -18,6 +18,7 @@ import { DividerPassThroughOptions } from '../divider';
 import { DockPassThroughOptions } from '../dock';
 import { FieldsetPassThroughOptions } from '../fieldset';
 import { FileUploadPassThroughOptions } from '../fileupload';
+import { ImagePassThroughOptions } from '../image';
 import { InlineMessagePassThroughOptions } from '../inlinemessage';
 import { InplacePassThroughOptions } from '../inplace';
 import { MegaMenuPassThroughOptions } from '../megamenu';
@@ -82,6 +83,7 @@ interface PrimeVuePTOptions {
     dynamicdialog?: DialogPassThroughOptions;
     fieldset?: FieldsetPassThroughOptions;
     fileupload?: FileUploadPassThroughOptions;
+    image?: ImagePassThroughOptions;
     inlinemessage?: InlineMessagePassThroughOptions;
     inplace?: InplacePassThroughOptions;
     megamenu?: MegaMenuPassThroughOptions;

components/lib/image/Image.d.ts

@@ -9,6 +9,127 @@
  */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type ImagePassThroughOptionType = ImagePassThroughAttributes | ((options: ImagePassThroughMethodOptions) => ImagePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ImagePassThroughMethodOptions {
+    props: ImageProps;
+    state: ImageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ImageProps.pt}
+ */
+export interface ImagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toolbar's DOM element.
+     */
+    toolbar?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate right button's DOM element.
+     */
+    rotateRightButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate right icon's DOM element.
+     */
+    rotateRightIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate left button's DOM element.
+     */
+    rotateLeftButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate left icon's DOM element.
+     */
+    rotateLeftIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom out button's DOM element.
+     */
+    zoomOutButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom out icon's DOM element.
+     */
+    zoomOutIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom in button's DOM element.
+     */
+    zoomInButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom in icon's DOM element.
+     */
+    zoomInIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the preview container's DOM element.
+     */
+    previewContainer?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the preview's DOM element.
+     */
+    preview?: ImagePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ImagePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Image component.
+ */
+export interface ImageState {
+    /**
+     * Mask visible state as a boolean.
+     * @defaultValue false
+     */
+    maskVisible: boolean;
+    /**
+     * Preview visible state as a boolean.
+     * @defaultValue false
+     */
+    previewVisible: boolean;
+    /**
+     * Rotate state as a number.
+     * @defaultValue 0
+     */
+    rotate: number;
+    /**
+     * Scale state as a boolean.
+     * @defaultValue 1
+     */
+    scale: number;
+}
 
 /**
  * Defines valid properties in Image component.
@@ -32,6 +153,11 @@ export interface ImageProps {
      * @deprecated since v3.27.0. Use 'indicator' slot.
      */
     indicatorIcon?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ImagePassThroughOptions}
+     */
+    pt?: ImagePassThroughOptions;
 }
 
 /**

components/lib/image/Image.vue

@@ -1,50 +1,50 @@
 <template>
-    <span :class="containerClass" :style="style">
+    <span :class="containerClass" :style="style" v-bind="ptm('root')">
         <slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
-            <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
+            <img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
-        <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
+        <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
             <slot name="indicatoricon">
-                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
+                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" v-bind="ptm('icon')" />
             </slot>
         </button>
         <Portal>
-            <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown">
+            <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown" v-bind="ptm('mask')">
-                <div class="p-image-toolbar">
+                <div class="p-image-toolbar" v-bind="ptm('toolbar')">
-                    <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
+                    <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')">
                         <slot name="refresh">
-                            <RefreshIcon />
+                            <RefreshIcon v-bind="ptm('rotateRightIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
+                    <button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')">
                         <slot name="undo">
-                            <UndoIcon />
+                            <UndoIcon v-bind="ptm('rotateLeftIcon')" />
                         </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="zoomDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')">
                         <slot name="zoomout">
-                            <SearchMinusIcon />
+                            <SearchMinusIcon v-bind="ptm('zoomOutIcon')" />
                         </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="zoomDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')">
                         <slot name="zoomin">
-                            <SearchPlusIcon />
+                            <SearchPlusIcon v-bind="ptm('zoomInIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
+                    <button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')">
                         <slot name="close">
-                            <TimesIcon />
+                            <TimesIcon v-bind="ptm('closeIcon')" />
                         </slot>
                     </button>
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
-                    <div v-if="previewVisible">
+                    <div v-if="previewVisible" v-bind="ptm('previewContainer')">
                         <slot name="preview" class="p-image-preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
-                            <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
+                            <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
                         </slot>
                     </div>
                 </transition>
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import EyeIcon from 'primevue/icons/eye';
 import RefreshIcon from 'primevue/icons/refresh';
@@ -66,6 +67,7 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Image',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide', 'error'],
     props: {