From 62770113481ff5a372b668e5739ae2e715bad4d3 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sun, 15 Dec 2024 15:01:17 +0800
Subject: [PATCH] feat: horizontal cards

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/Card.vue         | 30 ++++++++++++++++++-----------
 content/2.components/2.docs/card.md | 10 ++++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/components/content/Card.vue b/components/content/Card.vue
index 6e4fb0a6..587746be 100644
--- a/components/content/Card.vue
+++ b/components/content/Card.vue
@@ -12,16 +12,18 @@
         :src="img"
         class="w-full"
       />
-      <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
-        <SmartIcon v-if="icon" class="mb-2" :name="icon" :size="24" />
-        <UiCardTitle v-if="title || $slots.title">
-          <ContentSlot :use="$slots.title" unwrap="p" />
-          {{ title }}
-        </UiCardTitle>
-        <UiCardDescription v-if="description || $slots.description">
-          <ContentSlot :use="$slots.description" unwrap="p" />
-          {{ description }}
-        </UiCardDescription>
+      <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description" :class="{ 'flex-row items-center gap-5': horizontal }">
+        <SmartIcon v-if="icon" :name="icon" :size="iconSize" :class="{ 'mb-2': !horizontal }" />
+        <div class="flex flex-col gap-1.5">
+          <UiCardTitle v-if="title || $slots.title">
+            <ContentSlot :use="$slots.title" unwrap="p" />
+            {{ title }}
+          </UiCardTitle>
+          <UiCardDescription v-if="description || $slots.description">
+            <ContentSlot :use="$slots.description" unwrap="p" />
+            {{ description }}
+          </UiCardDescription>
+        </div>
       </UiCardHeader>
       <UiCardContent v-if="content || $slots.content || $slots.default">
         <ContentSlot :use="$slots.content" unwrap="p" />
@@ -44,7 +46,11 @@
 </template>
 
 <script setup lang="ts">
-const { showLinkIcon = true } = defineProps<{
+const {
+  showLinkIcon = true,
+  horizontal = false,
+  iconSize = 24,
+} = defineProps<{
   title?: string;
   description?: string;
   footer?: string;
@@ -52,9 +58,11 @@ const { showLinkIcon = true } = defineProps<{
   to?: string;
   target?: Target;
   icon?: string;
+  iconSize?: number;
   inStack?: boolean;
   img?: string;
   showLinkIcon?: boolean;
+  horizontal?: boolean;
 }>();
 const [UseTemplate, CardInner] = createReusableTemplate();
 </script>
diff --git a/content/2.components/2.docs/card.md b/content/2.components/2.docs/card.md
index 3c87ed80..de644a6f 100644
--- a/content/2.components/2.docs/card.md
+++ b/content/2.components/2.docs/card.md
@@ -40,6 +40,16 @@ badges:
     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.
     ::
 
+    ::card
+    ---
+    title: Horizontal Card
+    description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+    icon: 'lucide:fold-horizontal'
+    icon-size: 26
+    horizontal: true
+    ---
+    ::
+
     ::card
     ---
     to: https://github.com/ZTL-UwU/shadcn-docs-nuxt