New ImageDiff component

packages/metadata/src/components/index.ts

@@ -90,7 +90,7 @@ export const chart: MetaType[] = toMeta(['Chart']);
 
 export const messages: MetaType[] = toMeta(['Message', 'InlineMessage', { name: 'Toast', use: { as: 'ToastService' } }]);
 
-export const media: MetaType[] = toMeta(['Carousel', 'Galleria', 'Image']);
+export const media: MetaType[] = toMeta(['Carousel', 'Galleria', 'Image', 'ImageDiff']);
 
 export const misc: MetaType[] = toMeta(['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'OverlayBadge', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal']);
 

packages/primevue/src/config/Config.d.ts

@@ -48,6 +48,7 @@ import type { GalleriaPassThroughOptions } from 'primevue/galleria';
 import type { IconFieldPassThroughOptions } from 'primevue/iconfield';
 import type { IftaLabelPassThroughOptions } from 'primevue/iftalabel';
 import type { ImagePassThroughOptions } from 'primevue/image';
+import type { ImageDiffPassThroughOptions } from 'primevue/imagediff';
 import type { InlineMessagePassThroughOptions } from 'primevue/inlinemessage';
 import type { InplacePassThroughOptions } from 'primevue/inplace';
 import type { InputChipsPassThroughOptions } from 'primevue/inputchips';
@@ -205,6 +206,7 @@ export interface PrimeVuePTOptions {
     iconfield?: DefaultPassThrough<IconFieldPassThroughOptions>;
     iftalabel?: DefaultPassThrough<IftaLabelPassThroughOptions>;
     image?: DefaultPassThrough<ImagePassThroughOptions>;
+    imagediff?: DefaultPassThrough<ImageDiffPassThroughOptions>;
     inlinemessage?: DefaultPassThrough<InlineMessagePassThroughOptions>;
     inplace?: DefaultPassThrough<InplacePassThroughOptions>;
     inputchips?: DefaultPassThrough<InputChipsPassThroughOptions>;

packages/primevue/src/imagediff/BaseImageDiff.vue

@@ -0,0 +1,17 @@
+<script>
+import BaseComponent from '@primevue/core/basecomponent';
+import ImageDiffStyle from 'primevue/imagediff/style';
+
+export default {
+    name: 'BaseImageDiff',
+    extends: BaseComponent,
+    props: {},
+    style: ImageDiffStyle,
+    provide() {
+        return {
+            $pcImageDiff: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

packages/primevue/src/imagediff/ImageDiff.d.ts

@@ -0,0 +1,116 @@
+/**
+ *
+ * ImageDiff
+ *
+ * [Live Demo](https://www.primevue.org/imagediff/)
+ *
+ * @module imagediff
+ *
+ */
+import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { PassThroughOptions } from 'primevue/passthrough';
+import { TransitionProps } from 'vue';
+
+export declare type ImageDiffPassThroughOptionType = ImageDiffPassThroughAttributes | ((options: ImageDiffPassThroughMethodOptions) => ImageDiffPassThroughAttributes | string) | string | null | undefined;
+
+export declare type ImageDiffPassThroughTransitionType = TransitionProps | ((options: ImageDiffPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ImageDiffPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: ImageDiffProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ImageDiffProps.pt}
+ */
+export interface ImageDiffPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: ImageDiffPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ImageDiffPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ImageDiff component.
+ */
+export interface ImageDiffProps {
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {ImageDiffPassThroughOptions}
+     */
+    pt?: PassThrough<ImageDiffPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in ImageDiff slots.
+ */
+export interface ImageDiffSlots {}
+
+export interface ImageDiffEmitsOptions {}
+
+export declare type ImageDiffEmits = EmitFn<ImageDiffEmitsOptions>;
+
+/**
+ * **PrimeVue - ImageDiff**
+ *
+ * _ImageDiff_
+ *
+ * [Live Demo](https://www.primevue.org/imagediff/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const ImageDiff: DefineComponent<ImageDiffProps, ImageDiffSlots, ImageDiffEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        ImageDiff: GlobalComponentConstructor<ImageDiffProps, ImageDiffSlots, ImageDiffEmits>;
+    }
+}
+
+export default ImageDiff;

packages/primevue/src/imagediff/ImageDiff.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="cx('root')" :pt="ptmi('root')">
+        <p :pt="ptm('container')">This feature is planned for the next phase.</p>
+    </div>
+</template>
+
+<script>
+import BaseImageDiff from './BaseImageDiff.vue';
+
+export default {
+    name: 'ImageDiff',
+    extends: BaseImageDiff
+};
+</script>

packages/primevue/src/imagediff/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "./ImageDiff.vue",
+    "module": "./ImageDiff.vue",
+    "types": "./ImageDiff.d.ts",
+    "browser": {
+        "./sfc": "./ImageDiff.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

packages/primevue/src/imagediff/style/ImageDiffStyle.d.ts

@@ -0,0 +1,19 @@
+/**
+ *
+ * ImageDiff
+ *
+ * [Live Demo](https://www.primevue.org/imagediff/)
+ *
+ * @module imagediffstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum ImageDiffClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-imagediff'
+}
+
+export interface ImageDiffStyle extends BaseStyle {}

packages/primevue/src/imagediff/style/ImageDiffStyle.js

@@ -0,0 +1,15 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const theme = ({ dt }) => `
+.
+`;
+
+const classes = {
+    root: 'p-imagediff'
+};
+
+export default BaseStyle.extend({
+    name: 'imagediff',
+    theme,
+    classes
+});

packages/primevue/src/imagediff/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./ImageDiffStyle.js",
+    "module": "./ImageDiffStyle.js",
+    "types": "./ImageDiffStyle.d.ts",
+    "sideEffects": false
+}