ImageCompare types

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<ImageCompareEmitsOptions>;
@@ -96,9 +129,9 @@ export declare type ImageCompareEmits = EmitFn<ImageCompareEmitsOptions>;
 /**
  * **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)
  *

packages/primevue/src/imagecompare/ImageCompare.vue

@@ -1,8 +1,8 @@
 <template>
-    <div :class="cx('root')" :pt="ptmi('root')">
+    <div :class="cx('root')" v-bind="ptmi('root')">
         <slot name="left"></slot>
         <slot name="right"></slot>
-        <input type="range" min="0" max="100" value="50" @input="onSlide" :class="cx('slider')" :pt="ptm('slider')" />
+        <input type="range" min="0" max="100" value="50" @input="onSlide" :class="cx('slider')" v-bind="ptm('slider')" />
     </div>
 </template>
 
@@ -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%)';
         }
     }

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 {}