From 4a564482b0ef4ecfb897eb94d1717cdbf9dd1dfa Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2024 18:22:36 +0300
Subject: [PATCH] Improved pcPrefix Demo

---
 apps/showcase/doc/passthrough/PCPrefixDoc.vue | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/apps/showcase/doc/passthrough/PCPrefixDoc.vue b/apps/showcase/doc/passthrough/PCPrefixDoc.vue
index cf655e90d..08c55fee8 100644
--- a/apps/showcase/doc/passthrough/PCPrefixDoc.vue
+++ b/apps/showcase/doc/passthrough/PCPrefixDoc.vue
@@ -1,20 +1,24 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p>
+        <p>
+            Section names prefixed with <i>pc</i> denote PrimeVue components, distinguishing them from standard DOM elements and indicating the necessity for a nested structure. For example, the "badge" section is identified as <i>pcBadge</i> because
+            the button component incorporates the badge component internally.
+        </p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Button
             type="button"
             label="Messages"
-            icon="pi pi-users"
+            icon="pi pi-inbox"
             badge="2"
-            outlined
+            variant="outlined"
+            severity="secondary"
             :pt="{
-                root: 'border-violet-500',
-                label: 'text-violet-900 dark:text-violet-400',
-                icon: 'text-violet-900 dark:text-violet-400',
+                root: '!px-4 !py-3',
+                icon: '!text-xl !text-violet-500 dark:!text-violet-400',
+                label: '!text-lg !text-violet-500 dark:!text-violet-400',
                 pcBadge: {
-                    root: '!bg-violet-400 !text-white'
+                    root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
                 }
             }"
         />
@@ -28,26 +32,38 @@ export default {
         return {
             code: {
                 basic: `
-<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+ <Button
+    type="button"
+    label="Messages"
+    icon="pi pi-inbox"
+    badge="2"
+    variant="outlined"
+    severity="secondary"
     :pt="{
-        root: 'border-violet-500',
-        label: 'text-violet-900 dark:text-violet-400',
-        icon: 'text-violet-900 dark:text-violet-400',
+        root: '!px-4 !py-3',
+        icon: '!text-xl !text-violet-500 dark:!text-violet-400',
+        label: '!text-lg !text-violet-500 dark:!text-violet-400',
         pcBadge: {
-            root: '!bg-violet-400 !text-white'
+            root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
         }
     }"
 />
 `,
                 options: `
 <template>
-    <Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+     <Button
+        type="button"
+        label="Messages"
+        icon="pi pi-inbox"
+        badge="2"
+        variant="outlined"
+        severity="secondary"
         :pt="{
-            root: 'border-violet-500',
-            label: 'text-violet-900 dark:text-violet-400',
-            icon: 'text-violet-900 dark:text-violet-400',
+            root: '!px-4 !py-3',
+            icon: '!text-xl !text-violet-500 dark:!text-violet-400',
+            label: '!text-lg !text-violet-500 dark:!text-violet-400',
             pcBadge: {
-                root: '!bg-violet-400 !text-white'
+                root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
             }
         }"
     />
@@ -55,13 +71,19 @@ export default {
 `,
                 composition: `
 <template>
-    <Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
+    <Button
+        type="button"
+        label="Messages"
+        icon="pi pi-inbox"
+        badge="2"
+        variant="outlined"
+        severity="secondary"
         :pt="{
-            root: 'border-violet-500',
-            label: 'text-violet-900 dark:text-violet-400',
-            icon: 'text-violet-900 dark:text-violet-400',
+            root: '!px-4 !py-3',
+            icon: '!text-xl !text-violet-500 dark:!text-violet-400',
+            label: '!text-lg !text-violet-500 dark:!text-violet-400',
             pcBadge: {
-                root: '!bg-violet-400 !text-white'
+                root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
             }
         }"
     />