ImageCompare types

pull/6537/head
tugcekucukoglu 2024-10-03 21:40:11 +03:00
parent 15f6aab46a
commit 7881c7063d
3 changed files with 55 additions and 20 deletions

View File

@ -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 { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
import type { ComponentHooks } from '@primevue/core/basecomponent';
import type { PassThroughOptions } from 'primevue/passthrough'; 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 ImageComparePassThroughOptionType = ImageComparePassThroughAttributes | ((options: ImageComparePassThroughMethodOptions) => ImageComparePassThroughAttributes | string) | string | null | undefined;
export declare type ImageComparePassThroughTransitionType = TransitionProps | ((options: ImageComparePassThroughMethodOptions) => TransitionProps) | undefined;
/** /**
* Custom passthrough(pt) option method. * Custom passthrough(pt) option method.
*/ */
@ -50,6 +49,15 @@ export interface ImageComparePassThroughOptions {
* Used to pass attributes to the root's DOM element. * Used to pass attributes to the root's DOM element.
*/ */
root?: ImageComparePassThroughOptionType; 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. * Defines valid properties in ImageCompare component.
*/ */
export interface ImageCompareProps { 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. * 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 interface ImageCompareEmitsOptions {}
export declare type ImageCompareEmits = EmitFn<ImageCompareEmitsOptions>; export declare type ImageCompareEmits = EmitFn<ImageCompareEmitsOptions>;
@ -96,9 +129,9 @@ export declare type ImageCompareEmits = EmitFn<ImageCompareEmitsOptions>;
/** /**
* **PrimeVue - ImageCompare** * **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) * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
* *

View File

@ -1,8 +1,8 @@
<template> <template>
<div :class="cx('root')" :pt="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<slot name="left"></slot> <slot name="left"></slot>
<slot name="right"></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> </div>
</template> </template>
@ -17,8 +17,6 @@ export default {
const value = event.target.value; const value = event.target.value;
const image = event.target.previousElementSibling; const image = event.target.previousElementSibling;
console.log(image);
image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)'; image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';
} }
} }

View File

@ -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'; import type { BaseStyle } from '@primevue/core/base/style';
export enum ImageDiffClasses { export enum ImageCompareClasses {
/** /**
* Class name of the root element * 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 {}