From bad21c91633a58d67befede42603fbacd13063c5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 1 Oct 2024 08:26:55 +0300
Subject: [PATCH] Fixed divider sample, update deferred demos

---
 apps/showcase/doc/deferredcontent/BasicDoc.vue   |  8 ++++----
 .../doc/deferredcontent/DataTableDoc.vue         |  2 +-
 apps/showcase/doc/divider/LoginDoc.vue           | 16 ++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/showcase/doc/deferredcontent/BasicDoc.vue b/apps/showcase/doc/deferredcontent/BasicDoc.vue
index 16568695b..d2c8d6a01 100644
--- a/apps/showcase/doc/deferredcontent/BasicDoc.vue
+++ b/apps/showcase/doc/deferredcontent/BasicDoc.vue
@@ -6,7 +6,7 @@
         <div style="height: 1000px">Scroll down to lazy load an image.</div>
 
         <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
         </DeferredContent>
     </div>
     <DocSectionCode :code="code" />
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <DeferredContent @load="onImageLoad">
-    <img src="/images/nature/nature4.jpg" alt="Nature" />
+    <img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
 </DeferredContent>
 `,
                 options: `
@@ -29,7 +29,7 @@ export default {
         <div style="height: 1000px">Scroll down to lazy load an image.</div>
 
         <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
         </DeferredContent>
     </div>
 </template>
@@ -51,7 +51,7 @@ export default {
         <div style="height: 1000px">Scroll down to lazy load an image.</div>
 
         <DeferredContent @load="onImageLoad">
-            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
+            <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
         </DeferredContent>
     </div>
 </template>
diff --git a/apps/showcase/doc/deferredcontent/DataTableDoc.vue b/apps/showcase/doc/deferredcontent/DataTableDoc.vue
index 68ec41072..878b0bfc2 100644
--- a/apps/showcase/doc/deferredcontent/DataTableDoc.vue
+++ b/apps/showcase/doc/deferredcontent/DataTableDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A practical example that loads only when table becomes visible in viewport.</p>
+        <p>A practical example that triggers a fetch when the table becomes visible in viewport.</p>
     </DocSectionText>
     <div class="card">
         <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
diff --git a/apps/showcase/doc/divider/LoginDoc.vue b/apps/showcase/doc/divider/LoginDoc.vue
index 9cf4d6764..5134636a2 100644
--- a/apps/showcase/doc/divider/LoginDoc.vue
+++ b/apps/showcase/doc/divider/LoginDoc.vue
@@ -18,8 +18,8 @@
                 </div>
             </div>
             <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5/12 flex items-center justify-center py-5">
                 <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -50,8 +50,8 @@ export default {
         </div>
     </div>
     <div class="w-full md:w-2/12">
-        <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
-        <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
+        <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+        <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
     </div>
     <div class="w-full md:w-5/12 flex items-center justify-center py-5">
         <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -76,8 +76,8 @@ export default {
                 </div>
             </div>
             <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5/12 flex items-center justify-center py-5">
                 <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -107,8 +107,8 @@ export default {
                 </div>
             </div>
             <div class="w-full md:w-2/12">
-                <Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
-                <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
+                <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
+                <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5/12 flex items-center justify-center py-5">
                 <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>