diff --git a/packages/primevue/src/imagecompare/ImageCompare.d.ts b/packages/primevue/src/imagecompare/ImageCompare.d.ts index f153506bd..6eb9a8070 100644 --- a/packages/primevue/src/imagecompare/ImageCompare.d.ts +++ b/packages/primevue/src/imagecompare/ImageCompare.d.ts @@ -1,20 +1,19 @@ /** * - * ImageCompare + * ImageCompare compares two images side by side with a slider. * - * [Live Demo](https://www.primevue.org/ImageCompare/) + * [Live Demo](https://www.primevue.org/imagecompare) * - * @module ImageCompare + * @module imagecompare * */ import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core'; +import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; -import { TransitionProps } from 'vue'; +import { VNode } from 'vue'; export declare type ImageComparePassThroughOptionType = ImageComparePassThroughAttributes | ((options: ImageComparePassThroughMethodOptions) => ImageComparePassThroughAttributes | string) | string | null | undefined; -export declare type ImageComparePassThroughTransitionType = TransitionProps | ((options: ImageComparePassThroughMethodOptions) => TransitionProps) | undefined; - /** * Custom passthrough(pt) option method. */ @@ -50,6 +49,15 @@ export interface ImageComparePassThroughOptions { * Used to pass attributes to the root's DOM element. */ root?: ImageComparePassThroughOptionType; + /** + * Used to pass attributes to the slider's DOM element. + */ + slider?: ImageComparePassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; } /** @@ -63,6 +71,19 @@ export interface ImageComparePassThroughAttributes { * Defines valid properties in ImageCompare component. */ export interface ImageCompareProps { + /** + * Index of the element in tabbing order. + * @defaultValue 0 + */ + tabindex?: number | undefined; + /** + * Defines a string value that labels an interactive element. + */ + ariaLabel?: string | undefined; + /** + * Identifier of the underlying input element. + */ + ariaLabelledby?: string | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -85,10 +106,22 @@ export interface ImageCompareProps { } /** - * Defines valid slots in ImageCompare slots. + * Defines valid slots in ImageCompare component. */ -export interface ImageCompareSlots {} +export interface ImageCompareSlots { + /** + * Custom left template. + */ + left(): VNode[]; + /** + * Custom right template. + */ + right(): VNode[]; +} +/** + * Defines valid emits in ImageCompare component. + */ export interface ImageCompareEmitsOptions {} export declare type ImageCompareEmits = EmitFn; @@ -96,9 +129,9 @@ export declare type ImageCompareEmits = EmitFn; /** * **PrimeVue - ImageCompare** * - * _ImageCompare_ + * _ImageCompare compares two images side by side with a slider._ * - * [Live Demo](https://www.primevue.org/ImageCompare/) + * [Live Demo](https://www.primevue.org/imagecompare/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * diff --git a/packages/primevue/src/imagecompare/ImageCompare.vue b/packages/primevue/src/imagecompare/ImageCompare.vue index ee7a28f2e..b36522881 100644 --- a/packages/primevue/src/imagecompare/ImageCompare.vue +++ b/packages/primevue/src/imagecompare/ImageCompare.vue @@ -1,8 +1,8 @@ @@ -17,8 +17,6 @@ export default { const value = event.target.value; const image = event.target.previousElementSibling; - console.log(image); - image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)'; } } diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts b/packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts index 1ff3e0f34..373c882e7 100644 --- a/packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts +++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts @@ -1,19 +1,23 @@ /** * - * ImageDiff + * ImageCompare compares two images side by side with a slider. * - * [Live Demo](https://www.primevue.org/imagediff/) + * [Live Demo](https://www.primevue.org/imagecompare/) * - * @module imagediffstyle + * @module imagecomparestyle * */ import type { BaseStyle } from '@primevue/core/base/style'; -export enum ImageDiffClasses { +export enum ImageCompareClasses { /** * Class name of the root element */ - root = 'p-imagediff' + root = 'p-imagecompare', + /** + * Class name of the slider element + */ + slider = 'p-imagecompare-slider' } -export interface ImageDiffStyle extends BaseStyle {} +export interface ImageCompareStyle extends BaseStyle {}