CardHeader: Improve properties definition

Vanilla-OS · May 12, 2024 · 0cac8b1 · 0cac8b1
1 parent aa3e9d4
commit 0cac8b1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -3,7 +3,14 @@
         :link="item.type === 'clickable' ? item : {}"
         :class="cardClasses"
     >
-        <card-header :item :altText />
+        <card-header
+            :title="item.title"
+            :type="item.type"
+            :icon="item.icon"
+            :iconPack="item.iconPack"
+            :iconAsImage="item.iconAsImage"
+            :altText
+        />
         <card-content :item :altText />
         <card-footer v-if="item.footerActions" :actions="item.footerActions" />
     </conditional-link>

diff --git a/src/components/CardHeader.vue b/src/components/CardHeader.vue
@@ -2,18 +2,18 @@
     <div :class="['card-header', { 'card-header--multiline': isMultiline }]">
         <h3>
             <an-icon
-                v-if="item.icon && item.type !== 'adv'"
-                :icon="item.icon"
-                :iconPack="item.iconPack"
-                :iconAsImage="item.iconAsImage"
+                v-if="icon && type !== 'adv'"
+                :icon="icon"
+                :iconPack="iconPack"
+                :iconAsImage="iconAsImage"
                 :altText
             />
             <template v-if="isMultiline"
-                >{{ item.title[0] }}<br />{{ item.title[1] }}</template
+                >{{ title[0] }}<br />{{ title[1] }}</template
             >
-            <template v-else>{{ item.title ? " " + item.title : "" }}</template>
+            <template v-else>{{ title ? " " + title : "" }}</template>
         </h3>
-        <div v-if="item?.type === 'clickable'">
+        <div v-if="type === 'clickable'">
             <div class="btn btn--link btn--inline btn--med">
                 <an-icon icon="arrow_forward" iconPack="mdi" />
             </div>
@@ -22,9 +22,12 @@
 </template>
 
 <script setup lang="ts">
+import type { AnIconProps } from "./AnIcon.vue";
 import type { CardItem } from "./Card.vue";
 
-const props = defineProps<{ item: CardItem; altText?: string }>();
+const props = defineProps<
+    Pick<CardItem, "title" | "type"> & Partial<AnIconProps>
+>();
 
-const isMultiline = Array.isArray(props.item.title);
+const isMultiline = Array.isArray(props.title);
 </script>