CardFooter: Define FooterAction, move conditional rendering outside

Author: mks-h

src/components/Card.vue

@@ -18,11 +18,12 @@
     >
         <card-header :item :altText />
         <card-content :item :altText />
-        <card-footer :item />
+        <card-footer v-if="item.footerActions" :actions="item.footerActions" />
     </conditional-link>
 </template>
 
 <script setup lang="ts">
+import type { CardFooterAction } from "./CardFooter.vue";
 import type { LinkProps } from "./ConditionalLink.vue";
 
 interface CardItemI {
@@ -40,12 +41,7 @@ interface CardItemI {
     }[];
     btn?: string;
     html?: string;
-    footerActions?: {
-        title?: string;
-        onClick: (event: MouseEvent) => void;
-        icon: string;
-        iconPack: "mdi" | "fa";
-    }[];
+    footerActions?: CardFooterAction[];
 }
 
 export type CardItem = CardItemI & LinkProps;

src/components/CardFooter.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="card-footer" v-if="item.footerActions">
+    <div class="card-footer">
         <div
             class="btn btn--link btn--inline btn--med"
-            v-for="(action, index) in item.footerActions"
+            v-for="(action, index) in actions"
             :key="index"
             @click="action.onClick"
         >
@@ -18,7 +18,12 @@
 </template>
 
 <script setup lang="ts">
-import type { CardItem } from "./Card.vue";
+export interface CardFooterAction {
+    title?: string;
+    onClick: (event: MouseEvent) => void;
+    icon: string;
+    iconPack: "mdi" | "fa";
+}
 
-defineProps<{ item: CardItem }>();
+defineProps<{ actions: CardFooterAction[] }>();
 </script>