From e3dd7b8958ddb1192cd1fbe61853ae4eb8737d09 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 11 Jul 2023 12:11:42 +0100
Subject: [PATCH] Update passthrough demo

---
 doc/passthrough/BasicDoc.vue | 54 ++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index 68cfcbee8..a7f42a635 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -12,9 +12,15 @@
             header="Header"
             toggleable
             :pt="{
-                header: (opts) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed
+                        }
+                    ]
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
                 toggler: { class: 'bg-primary hover:bg-primary-reverse' }
@@ -37,12 +43,18 @@ export default {
                 basic: `
 <Panel header="Header" toggleable
     :pt="{
-        header: (opts: PanelPassThroughMethodOptions) => {
-            return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-        },
+        header: (options) => ({
+            class: [
+                'border-primary',
+                {
+                    'bg-primary': options.state.d_collapsed,
+                    'bg-primary-reverse': !options.state.d_collapsed,
+                },
+            ],
+        }),
         content: { class: 'border-primary text-lg text-primary-700' },
         title: { class: 'text-xl' },
-        toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+        toggler: { 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.
@@ -54,12 +66,18 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: (opts: PanelPassThroughMethodOptions) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed,
+                        },
+                    ],
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: { 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.
@@ -76,12 +94,18 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: (opts: PanelPassThroughMethodOptions) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed,
+                        },
+                    ],
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: { 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.