From f9a14a73cfb7e98744f21e342b8920923b9d3c0a Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <1697880+AngelFQC@users.noreply.github.com>
Date: Wed, 11 Dec 2024 01:30:40 -0500
Subject: [PATCH] Display: Add template for title and footer in BaseCard vue
 component

---
 .../components/basecomponents/BaseCard.vue    | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/assets/vue/components/basecomponents/BaseCard.vue b/assets/vue/components/basecomponents/BaseCard.vue
index f4dc1dce03..1a85ecaa52 100644
--- a/assets/vue/components/basecomponents/BaseCard.vue
+++ b/assets/vue/components/basecomponents/BaseCard.vue
@@ -1,10 +1,23 @@
 <template>
-  <Card
-    :class="customClass"
-  >
-    <template #header>
+  <Card :class="customClass">
+    <template
+      #header
+      v-if="slots.header"
+    >
       <slot name="header"></slot>
     </template>
+    <template
+      #title
+      v-if="slots.title"
+    >
+      <slot name="title"></slot>
+    </template>
+    <template
+      #footer
+      v-if="slots.footer"
+    >
+      <slot name="footer"></slot>
+    </template>
     <template #content>
       <slot></slot>
     </template>
@@ -12,8 +25,8 @@
 </template>
 
 <script setup>
-import Card from 'primevue/card'
-import {computed} from "vue"
+import Card from "primevue/card"
+import { computed, useSlots } from "vue"
 
 const props = defineProps({
   plain: {
@@ -22,10 +35,12 @@ const props = defineProps({
   },
 })
 
+const slots = useSlots()
+
 const customClass = computed(() => {
-  let resultClass = ''
+  let resultClass = ""
   if (props.plain) {
-    resultClass += 'bg-gray-15 border border-gray-25 shadow-none '
+    resultClass += "bg-gray-15 border border-gray-25 shadow-none "
   }
   return resultClass
 })