Refactor #3918 - For Image

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;
 }
 
 /**