From d0dd241b02fc8b2fdb1c18d1d4efa68096440a86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 3 May 2023 20:56:09 +0300
Subject: [PATCH] Image demo updates

---
 doc/image/PreviewDoc.vue  |  6 +-----
 doc/image/TemplateDoc.vue | 32 ++++++++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 5d58eaf3a..51575a899 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -3,11 +3,7 @@
         <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview>
-            <template #imagePreview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" :style="slotProps.imagePreviewStyle" @click="slotProps.previewImageClick" />
-            </template>
-        </Image>
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 
     <DocSectionCode :code="code" />
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index 8fcaa8fb8..cca7a2631 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -3,10 +3,16 @@
         <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> slot for custom content.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
     <DocSectionCode :code="code" />
@@ -18,28 +24,46 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+<Image alt="Image" preview>
     <template #indicatoricon>
         <i class="pi pi-check"></i>
     </template>
+    <template #image>
+        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+    </template>
+    <template #preview="slotProps">
+        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+    </template>
 </Image>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
 </template>`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
 </template>`