From a5e4156c827f31dd0829a0799f8f9165c3c3751a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Aug 2023 11:49:23 +0300
Subject: [PATCH] Updated usePassThrough docs

---
 doc/passthrough/UsePassThroughDoc.vue | 111 ++++++++++++++++++++++++++
 doc/tailwind/CustomizationDoc.vue     |  10 +--
 pages/passthrough/index.vue           |   6 ++
 3 files changed, 122 insertions(+), 5 deletions(-)
 create mode 100644 doc/passthrough/UsePassThroughDoc.vue

diff --git a/doc/passthrough/UsePassThroughDoc.vue b/doc/passthrough/UsePassThroughDoc.vue
new file mode 100644
index 000000000..5917539be
--- /dev/null
+++ b/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>
diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue
index c753bafcb..b45a2c2a2 100644
--- a/doc/tailwind/CustomizationDoc.vue
+++ b/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.
-        useMergeProps: true,    // Whether to use Vue's 'mergeProps' method to merge PT options.
+        mergeSecitons: true,
+        mergeProps: false
     }
 );
 
diff --git a/pages/passthrough/index.vue b/pages/passthrough/index.vue
index 44d65fe13..39d8b0087 100644
--- a/pages/passthrough/index.vue
+++ b/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
                 }
             ]
         };