feat: horizontal cards

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Dec 15, 2024 · 6277011 · 6277011
1 parent bb5c281
commit 6277011
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git 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,17 +46,23 @@
 </template>
 
 <script setup lang="ts">
-const { showLinkIcon = true } = defineProps<{
+const {
+  showLinkIcon = true,
+  horizontal = false,
+  iconSize = 24,
+} = defineProps<{
   title?: string;
   description?: string;
   footer?: string;
   content?: string;
   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
@@ -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