ImageCompare types
parent
15f6aab46a
commit
7881c7063d
|
@ -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)
|
||||||
*
|
*
|
||||||
|
|
|
@ -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%)';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {}
|
||||||
|
|
Loading…
Reference in New Issue