From 0724715919fbac9df8e0fbc2c716d93aa4471d16 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 3 Oct 2024 16:18:21 +0300
Subject: [PATCH] ImageDiff demos added

---
 apps/showcase/assets/menu/menu.json           |  5 ++
 .../doc/imagediff/AccessibilityDoc.vue        |  9 ++
 apps/showcase/doc/imagediff/BasicDoc.vue      | 37 ++++++++
 apps/showcase/doc/imagediff/ImportDoc.vue     | 18 ++++
 apps/showcase/doc/imagediff/pt/PTViewer.vue   | 22 +++++
 apps/showcase/doc/imagediff/pt/index.vue      | 35 ++++++++
 .../doc/imagediff/theming/TailwindDoc.vue     |  8 ++
 apps/showcase/doc/imagediff/theming/index.vue | 56 ++++++++++++
 apps/showcase/pages/imagediff/index.vue       | 39 ++++++++
 packages/themes/scripts/build-tokens.js       | 89 ++++++++++++++++++-
 .../src/presets/aura/imagediff/index.js       |  1 +
 .../src/presets/aura/imagediff/package.json   |  5 ++
 12 files changed, 323 insertions(+), 1 deletion(-)
 create mode 100644 apps/showcase/doc/imagediff/AccessibilityDoc.vue
 create mode 100644 apps/showcase/doc/imagediff/BasicDoc.vue
 create mode 100644 apps/showcase/doc/imagediff/ImportDoc.vue
 create mode 100644 apps/showcase/doc/imagediff/pt/PTViewer.vue
 create mode 100644 apps/showcase/doc/imagediff/pt/index.vue
 create mode 100644 apps/showcase/doc/imagediff/theming/TailwindDoc.vue
 create mode 100644 apps/showcase/doc/imagediff/theming/index.vue
 create mode 100644 apps/showcase/pages/imagediff/index.vue
 create mode 100644 packages/themes/src/presets/aura/imagediff/index.js
 create mode 100644 packages/themes/src/presets/aura/imagediff/package.json

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 7ecbd3729..781612878 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -414,6 +414,11 @@
                         {
                             "name": "Image",
                             "to": "/image"
+                        },
+                        {
+                            "name": "ImageDiff",
+                            "to": "/imagediff",
+                            "badge": "NEW"
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/imagediff/AccessibilityDoc.vue b/apps/showcase/doc/imagediff/AccessibilityDoc.vue
new file mode 100644
index 000000000..05d727668
--- /dev/null
+++ b/apps/showcase/doc/imagediff/AccessibilityDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>IftaLabel does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/imagediff/BasicDoc.vue b/apps/showcase/doc/imagediff/BasicDoc.vue
new file mode 100644
index 000000000..667168f10
--- /dev/null
+++ b/apps/showcase/doc/imagediff/BasicDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ImageDiff</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ImageDiff />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ImageDiff />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/ImportDoc.vue b/apps/showcase/doc/imagediff/ImportDoc.vue
new file mode 100644
index 000000000..6d1c0e4de
--- /dev/null
+++ b/apps/showcase/doc/imagediff/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import ImageDiff from 'primevue/imagediff';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/pt/PTViewer.vue b/apps/showcase/doc/imagediff/pt/PTViewer.vue
new file mode 100644
index 000000000..6a442b24d
--- /dev/null
+++ b/apps/showcase/doc/imagediff/pt/PTViewer.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocPTViewer :docs="docs">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('ImageDiff'),
+                    key: 'ImageDiff'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/pt/index.vue b/apps/showcase/doc/imagediff/pt/index.vue
new file mode 100644
index 000000000..605d9671f
--- /dev/null
+++ b/apps/showcase/doc/imagediff/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ImageDiff Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOptions } from '@/components/doc/helpers';
+import PTViewer from './PTViewer.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
+                },
+                {
+                    id: 'pt.doc.image',
+                    label: 'ImageDiff PT Options',
+                    component: DocApiTable,
+                    data: getPTOptions('ImageDiff')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/theming/TailwindDoc.vue b/apps/showcase/doc/imagediff/theming/TailwindDoc.vue
new file mode 100644
index 000000000..4daa6c5f8
--- /dev/null
+++ b/apps/showcase/doc/imagediff/theming/TailwindDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
+            PrimeVue components with Tailwind CSS.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/imagediff/theming/index.vue b/apps/showcase/doc/imagediff/theming/index.vue
new file mode 100644
index 000000000..21123430c
--- /dev/null
+++ b/apps/showcase/doc/imagediff/theming/index.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ImageDiff Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ImageDiff')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('ImageDiff')
+                        }
+                    ]
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/imagediff/index.vue b/apps/showcase/pages/imagediff/index.vue
new file mode 100644
index 000000000..aa5e52f8c
--- /dev/null
+++ b/apps/showcase/pages/imagediff/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <DocComponent title="Vue ImageDiff Component" header="ImageDiff" description="ImageDiff" :componentDocs="docs" :apiDocs="['ImageDiff']" />
+</template>
+<!-- :ptTabComponent="ptComponent"
+    :themingDocs="themingDoc" -->
+
+<script>
+import AccessibilityDoc from '@/doc/imagediff/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/imagediff/BasicDoc.vue';
+import ImportDoc from '@/doc/imagediff/ImportDoc.vue';
+// import PTComponent from '@/doc/imagediff/pt/index.vue';
+// import ThemingDoc from '@/doc/imagediff/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ]
+            // ptComponent: PTComponent,
+            // themingDoc: ThemingDoc
+        };
+    }
+};
+</script>
diff --git a/packages/themes/scripts/build-tokens.js b/packages/themes/scripts/build-tokens.js
index 4db76672a..c9141dcf1 100644
--- a/packages/themes/scripts/build-tokens.js
+++ b/packages/themes/scripts/build-tokens.js
@@ -2,7 +2,94 @@ const fs = require('fs');
 const path = require('path');
 
 // prettier-ignore
-const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','IftaLabel','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','OverlayBadge','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
+const THEME_COMPONENTS = [
+    'Accordion',
+    'AutoComplete',
+    'Avatar',
+    'Badge',
+    'BlockUI',
+    'Breadcrumb',
+    'Button',
+    'Card',
+    'Carousel',
+    'CascadeSelect',
+    'Checkbox',
+    'Chip',
+    'ColorPicker',
+    'ConfirmDialog',
+    'ConfirmPopup',
+    'ContextMenu',
+    'DataTable',
+    'DataView',
+    'DatePicker',
+    'Dialog',
+    'Divider',
+    'Dock',
+    'Drawer',
+    'Editor',
+    'Fieldset',
+    'FileUpload',
+    'FloatLabel',
+    'Galleria',
+    'IconField',
+    'IftaLabel',
+    'Image',
+    'ImageDiff',
+    'InlineMessage',
+    'Inplace',
+    'InputChips',
+    'InputGroup',
+    'InputNumber',
+    'InputText',
+    'Knob',
+    'Listbox',
+    'MegaMenu',
+    'Menu',
+    'Menubar',
+    'Message',
+    'MeterGroup',
+    'MultiSelect',
+    'OrderList',
+    'OrganizationChart',
+    'OverlayBadge',
+    'Paginator',
+    'Panel',
+    'PanelMenu',
+    'Password',
+    'PickList',
+    'Popover',
+    'ProgressBar',
+    'ProgressSpinner',
+    'RadioButton',
+    'Rating',
+    'Ripple',
+    'ScrollPanel',
+    'Select',
+    'SelectButton',
+    'Skeleton',
+    'Slider',
+    'SpeedDial',
+    'SplitButton',
+    'Splitter',
+    'Stepper',
+    'Steps',
+    'Tabmenu',
+    'Tabs',
+    'TabView',
+    'Tag',
+    'Terminal',
+    'Textarea',
+    'TieredMenu',
+    'Timeline',
+    'Toast',
+    'ToggleButton',
+    'ToggleSwitch',
+    'Toolbar',
+    'Tooltip',
+    'Tree',
+    'TreeSelect',
+    'TreeTable'
+];
 
 const themeName = 'aura';
 const rootDir = path.resolve(__dirname, '../');
diff --git a/packages/themes/src/presets/aura/imagediff/index.js b/packages/themes/src/presets/aura/imagediff/index.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/packages/themes/src/presets/aura/imagediff/index.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/themes/src/presets/aura/imagediff/package.json b/packages/themes/src/presets/aura/imagediff/package.json
new file mode 100644
index 000000000..b1aea50fa
--- /dev/null
+++ b/packages/themes/src/presets/aura/imagediff/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/imagediff/index.d.ts"
+}