From 684134a310a37f39dcd20145cdb205a475062186 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 4 May 2023 10:45:01 +0300 Subject: [PATCH] Refactor #3918 - For Image --- api-generator/components/image.js | 6 ++ components/lib/config/PrimeVue.d.ts | 2 + components/lib/image/Image.d.ts | 126 ++++++++++++++++++++++++++++ components/lib/image/Image.vue | 38 +++++---- 4 files changed, 154 insertions(+), 18 deletions(-) diff --git a/api-generator/components/image.js b/api-generator/components/image.js index 2e1ba17b1..6125a357b 100644 --- a/api-generator/components/image.js +++ b/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.' } ]; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index 7a8edbebb..c51ca396d 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/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; diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts index 3148dc01c..2903efee1 100644 --- a/components/lib/image/Image.d.ts +++ b/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; } /** diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue index ad9bdde14..14d143619 100644 --- a/components/lib/image/Image.vue +++ b/components/lib/image/Image.vue @@ -1,50 +1,50 @@