From 8af7127be8e8d91eab42d6d888a4b56a52e22ceb Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 12 Jul 2023 00:14:34 +0100
Subject: [PATCH] Refactor on some demo

---
 doc/passthrough/BasicDoc.vue  | 37 +++++++++++++++++++++++++----------
 doc/passthrough/GlobalDoc.vue |  8 ++++++--
 doc/unstyled/ExampleDoc.vue   |  8 ++++----
 doc/unstyled/ThemeDoc.vue     | 12 ++++++------
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index 8f24d89e8..a7d8d4d1c 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -1,8 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be an object or a function that returns an object to define the arbitrary properties to apply
-            to the element such as styling, aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT.
+            Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the
+            arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the
+            element. Every component documentation has a dedicated section to document the available section names exposed via PT.
         </p>
         <p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
     </DocSectionText>
@@ -13,6 +14,10 @@
             toggleable
             :pt="{
                 header: (options) => ({
+                    id: 'myPanelHeader',
+                    style: {
+                        'user-select': 'none'
+                    },
                     class: [
                         'border-primary',
                         {
@@ -22,8 +27,8 @@
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
-                title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                title: 'text-xl',
+                toggler: () => 'bg-primary hover:bg-primary-reverse'
             }"
         >
             <p class="m-0">
@@ -44,6 +49,10 @@ export default {
 <Panel header="Header" toggleable
     :pt="{
         header: (options) => ({
+            id: 'myPanelHeader',
+            style: {
+                'user-select': 'none'
+            },
             class: [
                 'border-primary',
                 {
@@ -53,8 +62,8 @@ export default {
             ]
         }),
         content: { class: 'border-primary text-lg text-primary-700' },
-        title: { class: 'text-xl' },
-        toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+        title: 'text-xl',                                     // OR { class: 'text-xl' }
+        toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
     }">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -67,6 +76,10 @@ export default {
         <Panel header="Header" toggleable
             :pt="{
                 header: (options) => ({
+                    id: 'myPanelHeader',
+                    style: {
+                        'user-select': 'none'
+                    },
                     class: [
                         'border-primary',
                         {
@@ -76,8 +89,8 @@ export default {
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
-                title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                title: 'text-xl',                                     // OR { class: 'text-xl' }
+                toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -95,6 +108,10 @@ export default {
         <Panel header="Header" toggleable
             :pt="{
                 header: (options) => ({
+                    id: 'myPanelHeader',
+                    style: {
+                        'user-select': 'none'
+                    },
                     class: [
                         'border-primary',
                         {
@@ -104,8 +121,8 @@ export default {
                     ]
                 }),
                 content: { class: 'border-primary text-lg text-primary-700' },
-                title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                title: 'text-xl',                                     // OR { class: 'text-xl' }
+                toggler: () => 'bg-primary hover:bg-primary-reverse'  // OR { class: 'bg-primary hover:bg-primary-reverse' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/passthrough/GlobalDoc.vue b/doc/passthrough/GlobalDoc.vue
index 978d1a8e5..e4e5779e9 100644
--- a/doc/passthrough/GlobalDoc.vue
+++ b/doc/passthrough/GlobalDoc.vue
@@ -21,10 +21,14 @@ const app = createApp(App);
 app.use(PrimeVue, { 
     pt: {
         panel: {
-            header: { class: 'bg-primary' }
+            header: {
+                class: 'bg-primary'
+            }
         },
         autocomplete: {
-            input: { root: { class: 'w-16rem' } }
+            input: { 
+                root: 'w-16rem' // OR { class: 'w-16rem' }
+            }
         }
     } 
 });`
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/unstyled/ExampleDoc.vue
index d74356126..21d17dff2 100644
--- a/doc/unstyled/ExampleDoc.vue
+++ b/doc/unstyled/ExampleDoc.vue
@@ -12,7 +12,7 @@
                 :pt="{
                     root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
                     label: { class: 'text-white font-bold text-xl' },
-                    icon: { class: 'text-white text-2xl' }
+                    icon: 'text-white text-2xl'
                 }"
             />
         </div>
@@ -30,7 +30,7 @@ export default {
     :pt="{
         root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
         label: { class: 'text-white font-bold text-xl' },
-        icon: { class: 'text-white text-2xl' }
+        icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
     }"
 />`,
                 options: `
@@ -40,7 +40,7 @@ export default {
             :pt="{
                 root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
                 label: { class: 'text-white font-bold text-xl' },
-                icon: { class: 'text-white text-2xl' }
+                icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
             }"
         />
     </div>
@@ -54,7 +54,7 @@ export default {
         :pt="{
             root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
             label: { class: 'text-white font-bold text-xl' },
-            icon: { class: 'text-white text-2xl' }
+            icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
         }"
     />
 </template>
diff --git a/doc/unstyled/ThemeDoc.vue b/doc/unstyled/ThemeDoc.vue
index da9ccdeb6..cbd82284c 100644
--- a/doc/unstyled/ThemeDoc.vue
+++ b/doc/unstyled/ThemeDoc.vue
@@ -22,14 +22,14 @@ app.use(PrimeVue, {
     pt: {
         button: {
             root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
-            label: { class: 'text-white font-bold text-xl' },
-            icon: { class: 'text-white text-2xl' }
+            label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
+            icon: 'text-white text-2xl' 
         },
         panel: {
-            header: { class: 'bg-primary border-primary' },
-            content: { class: 'border-primary text-lg text-primary-700' },
-            title: { class: 'bg-primary text-xl' },
-            toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+            header: 'bg-primary border-primary',
+            content: 'border-primary text-lg text-primary-700',
+            title: 'bg-primary text-xl',
+            toggler: 'bg-primary hover:bg-primary-reverse'
         }
     } 
 });`