From 6687b1df81403eea4de75a01d7342fc34908a2c6 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Wed, 22 Mar 2023 18:58:53 -0800
Subject: [PATCH] update event listener to only bind when collapsable

---
 frontend/components/Base/Card.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Base/Card.vue b/frontend/components/Base/Card.vue
index 8926c29..88fef80 100644
--- a/frontend/components/Base/Card.vue
+++ b/frontend/components/Base/Card.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card bg-base-100 shadow-xl sm:rounded-lg">
     <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
-      <component :is="collapsable ? 'button' : 'div'" @click="collapsed = !collapsed">
+      <component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
         <h3 class="text-lg font-medium leading-6 flex items-center">
           <slot name="title"></slot>
           <template v-if="collapsable">
@@ -26,7 +26,7 @@
         'max-h-screen': !collapsed,
         'max-h-0': collapsed,
       }"
-      class="transition-[max-height] duration-150 overflow-hidden"
+      class="transition-[max-height] duration-200 overflow-hidden"
     >
       <slot />
     </div>
@@ -38,5 +38,9 @@
     collapsable?: boolean;
   }>();
 
+  function toggle() {
+    collapsed.value = !collapsed.value;
+  }
+
   const collapsed = ref(false);
 </script>