Updated usePassThrough docs

doc/passthrough/UsePassThroughDoc.vue

@@ -0,0 +1,111 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging.
+            One of the example use cases is customizing existing unstyled themes like Tailwind.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>
+            The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
+            <i>false</i> for <i>mergeProps</i>.
+        </p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+import { usePassThrough } from "primevue/passthrough";
+import Tailwind from "primevue/passthrough/tailwind";
+
+const app = createApp(App);
+
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            title: {
+                class: ['leading-none font-light text-2xl']
+            }
+        }
+    },
+    {
+        mergeSections: true,
+        useMergeProps: false
+    }
+);
+
+app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
+            },
+            code2: {
+                basic: `const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: true, mergeProps: false }
+);
+
+// Output: 
+// panel.header.class => 'my_panel_header'
+// panel.title.class => Tailwind.panel.title.class`
+            },
+            code3: {
+                basic: `const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: true, mergeProps: true }
+);
+
+// Output: 
+// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
+// panel.title.class => Tailwind.panel.title.class`
+            },
+            code4: {
+                basic: `const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: false, mergeProps: true }
+);
+
+// Output: 
+// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
+// panel.title.class => undefined`
+            },
+            code5: {
+                basic: `const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: false, mergeProps: false }
+);
+
+// Output: 
+// panel.header.class => 'my_panel_header'
+// panel.title.class => undefined`
+            }
+        };
+    }
+};
+</script>

doc/tailwind/CustomizationDoc.vue

@@ -4,10 +4,10 @@
             The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming documentation for each component
             demonstrates the theme with an editable example. For instance, the panel component has the following default configuration.
         </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>Let's assume the <i>title</i> section should be lighter and bigger. For the merge configuration behavior, visit <NuxtLink to="/passthrough/#usepassthrough">usePassThrough</NuxtLink> documentation.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <p>Let's assume the <i>title</i> section should be lighter and bigger.</p>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
@@ -65,8 +65,8 @@ const CustomTailwind = usePassThrough(
         }
     },
     {
-        merge: true,             // Used to merge PT options. The default is true.
+        mergeSecitons: true,
-        useMergeProps: true,    // Whether to use Vue's 'mergeProps' method to merge PT options.
+        mergeProps: false
     }
 );
 

pages/passthrough/index.vue

@@ -20,6 +20,7 @@ import BasicDoc from '@/doc/passthrough/BasicDoc';
 import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc';
 import GlobalDoc from '@/doc/passthrough/GlobalDoc';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
+import UsePassThroughDoc from '../../doc/passthrough/UsePassThroughDoc.vue';
 
 export default {
     data() {
@@ -44,6 +45,11 @@ export default {
                     id: 'customcss',
                     label: 'Custom CSS',
                     component: CustomCSSDoc
+                },
+                {
+                    id: 'usepassthrough',
+                    label: 'UsePassThrough',
+                    component: UsePassThroughDoc
                 }
             ]
         };