From b2b908bf0cd1c0646b32ad933f35f73c26b4608c Mon Sep 17 00:00:00 2001
From: AhnafAhamed <ahnafahamed4@gmail.com>
Date: Mon, 19 Sep 2022 07:15:37 +0530
Subject: [PATCH] feat: create card component with docs

---
 docs/components/card/card.md                  | 56 ++++++++++++++++++-
 .../card/examples/CardDefaultExample.vue      | 12 ++++
 docs/components/card/examples/CardExample.vue |  8 ---
 .../card/examples/CardHorizontalExample.vue   | 11 ++++
 .../card/examples/CardImageExample.vue        | 11 ++++
 src/components/Card/Card.vue                  | 21 ++++---
 .../Card/composables/useCardClasses.ts        | 34 +++++++++++
 src/components/Card/tests/Card.specs.ts       |  0
 src/components/Card/types.ts                  |  1 +
 9 files changed, 136 insertions(+), 18 deletions(-)
 create mode 100644 docs/components/card/examples/CardDefaultExample.vue
 delete mode 100644 docs/components/card/examples/CardExample.vue
 create mode 100644 docs/components/card/examples/CardHorizontalExample.vue
 create mode 100644 docs/components/card/examples/CardImageExample.vue
 create mode 100644 src/components/Card/composables/useCardClasses.ts
 create mode 100644 src/components/Card/tests/Card.specs.ts
 create mode 100644 src/components/Card/types.ts

diff --git a/docs/components/card/card.md b/docs/components/card/card.md
index 0bb9b88..a190c16 100644
--- a/docs/components/card/card.md
+++ b/docs/components/card/card.md
@@ -1,15 +1,65 @@
 <script setup>
-import CardExample from './examples/CardExample.vue'
+import CardDefaultExample from './examples/CardDefaultExample.vue'
+import CardImageExample from './examples/CardImageExample.vue'
+import CardHorizontalExample from './examples/CardHorizontalExample.vue'
 </script>
 # Card
 
+#### Get started with a large variety of Tailwind CSS card examples for your web project
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/card/](https://flowbite.com/docs/components/card/)
+:::
+
+Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
+
+## Prop - default
+
+<CardDefaultExample />
+
 ```vue
 <script setup>
 import { Card } from 'flowbite-vue'
 </script>
 <template>
-  <Card></Card>
+  <Card :href="'#'"/>
 </template>
 ```
 
-<CardExample />
+## Prop - image
+
+<CardImageExample />
+
+```vue
+<script setup>
+import { Card } from 'flowbite-vue'
+</script>
+<template>
+  <Card 
+    :variant="'image'" 
+    :href="'#'" 
+    :imgSrc="'./images/blog/image-1.jpg'" 
+    :imgAlt="'Image'"
+  />
+</template>
+```
+
+## Prop - horizontal
+
+<CardHorizontalExample />
+
+```vue
+<script setup>
+import { Card } from 'flowbite-vue'
+</script>
+<template>
+  <Card 
+    :variant="'horizontal'" 
+    :href="'#'" 
+    :imgSrc="'./images/blog/image-4.jpg'" 
+    :imgAlt="'Image'"
+  />
+</template>
+```
diff --git a/docs/components/card/examples/CardDefaultExample.vue b/docs/components/card/examples/CardDefaultExample.vue
new file mode 100644
index 0000000..32fdbff
--- /dev/null
+++ b/docs/components/card/examples/CardDefaultExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Card :href="'#'">
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { Card } from '../../../../src/index'
+</script>
diff --git a/docs/components/card/examples/CardExample.vue b/docs/components/card/examples/CardExample.vue
deleted file mode 100644
index 58cbc7f..0000000
--- a/docs/components/card/examples/CardExample.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Card></Card>
-  </div>
-</template>
-<script setup>
-import { Card } from '../../../../src/index'
-</script>
diff --git a/docs/components/card/examples/CardHorizontalExample.vue b/docs/components/card/examples/CardHorizontalExample.vue
new file mode 100644
index 0000000..56c9793
--- /dev/null
+++ b/docs/components/card/examples/CardHorizontalExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Card :href="'#'" :variant="'horizontal'" :imgSrc="'https://flowbite.com/docs/images/blog/image-4.jpg'" :imgAlt="'Desk'">
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+    </Card>
+  </div>
+</template>
+<script setup>
+import { Card } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/card/examples/CardImageExample.vue b/docs/components/card/examples/CardImageExample.vue
new file mode 100644
index 0000000..8030f09
--- /dev/null
+++ b/docs/components/card/examples/CardImageExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Card :href="'#'" :variant="'image'" :imgSrc="'https://flowbite.com/docs/images/blog/image-1.jpg'" :imgAlt="'Desk'">
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+    </Card>
+  </div>
+</template>
+<script setup>
+import { Card } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/src/components/Card/Card.vue b/src/components/Card/Card.vue
index 44655b0..7a0364f 100644
--- a/src/components/Card/Card.vue
+++ b/src/components/Card/Card.vue
@@ -1,18 +1,19 @@
 <template>
-  <a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
-    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+  <a :href="href" :class="cardClasses">
+    <img v-if="imgSrc" class="rounded-t-lg" :class="horizontalImageClasses" :src="imgSrc" :alt="imgAlt"/>
+    <div class="p-6">
+      <slot />
+    </div>
+    
   </a>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
+import { useCardsClasses } from './composables/useCardClasses'
+import type { CardsVariant } from './types'
 
 const props = defineProps({
-  horizontal: {
-    type: Boolean,
-    default: false,
-  },
   href: {
     type: String,
     default: '',
@@ -25,6 +26,12 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  variant: {
+    type: String as PropType<CardsVariant>,
+    default: 'default',
+  },
 })
 
+const { cardClasses, horizontalImageClasses } = useCardsClasses(props)
+
 </script>
diff --git a/src/components/Card/composables/useCardClasses.ts b/src/components/Card/composables/useCardClasses.ts
new file mode 100644
index 0000000..aaa4565
--- /dev/null
+++ b/src/components/Card/composables/useCardClasses.ts
@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import { computed, useSlots } from 'vue'
+import type { CardsVariant } from '../types'
+
+export type UseCardsClassesProps = {
+    variant: CardsVariant
+}
+
+export function useCardsClasses(props: UseCardsClassesProps): {
+    cardClasses: Ref<string>,
+    horizontalImageClasses: Ref<string>
+} {
+    const cardClasses = computed(() => {
+        if(props.variant === 'default') 
+            return 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
+        else if(props.variant === 'image')
+            return 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
+        else if(props.variant === 'horizontal')
+            return 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
+        return ''
+    })
+
+    const horizontalImageClasses = computed(() => {
+        if(props.variant === 'horizontal')
+            return 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg'
+        return ''
+    })
+
+    return {
+        cardClasses,
+        horizontalImageClasses,
+    }
+}
+
diff --git a/src/components/Card/tests/Card.specs.ts b/src/components/Card/tests/Card.specs.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
new file mode 100644
index 0000000..b84f39b
--- /dev/null
+++ b/src/components/Card/types.ts
@@ -0,0 +1 @@
+export type CardsVariant = 'default' | 'image' | 'horizontal'
\ No newline at end of file