diff --git a/docs/components/card/card.md b/docs/components/card/card.md index 16af53f..fa37f6e 100644 --- a/docs/components/card/card.md +++ b/docs/components/card/card.md @@ -1,15 +1,65 @@ # Vue Card Components - Flowbite +#### 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 + + + ```vue ``` - +## Prop - image + + + +```vue + + +``` + +## Prop - horizontal + + + +```vue + + +``` diff --git a/docs/components/card/examples/CardDefaultExample.vue b/docs/components/card/examples/CardDefaultExample.vue new file mode 100644 index 0000000..e28806c --- /dev/null +++ b/docs/components/card/examples/CardDefaultExample.vue @@ -0,0 +1,12 @@ + + + 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 @@ - - diff --git a/docs/components/card/examples/CardHorizontalExample.vue b/docs/components/card/examples/CardHorizontalExample.vue new file mode 100644 index 0000000..7c8258a --- /dev/null +++ b/docs/components/card/examples/CardHorizontalExample.vue @@ -0,0 +1,11 @@ + + diff --git a/docs/components/card/examples/CardImageExample.vue b/docs/components/card/examples/CardImageExample.vue new file mode 100644 index 0000000..fe1ab2f --- /dev/null +++ b/docs/components/card/examples/CardImageExample.vue @@ -0,0 +1,11 @@ + + diff --git a/src/components/Card/Card.vue b/src/components/Card/Card.vue deleted file mode 100644 index 44655b0..0000000 --- a/src/components/Card/Card.vue +++ /dev/null @@ -1,30 +0,0 @@ - - diff --git a/src/components/Card/TheCard.vue b/src/components/Card/TheCard.vue new file mode 100644 index 0000000..1270084 --- /dev/null +++ b/src/components/Card/TheCard.vue @@ -0,0 +1,37 @@ + + diff --git a/src/components/Card/composables/useCardClasses.ts b/src/components/Card/composables/useCardClasses.ts new file mode 100644 index 0000000..ff1a4a4 --- /dev/null +++ b/src/components/Card/composables/useCardClasses.ts @@ -0,0 +1,34 @@ +import type { Ref } from 'vue' +import { computed } from 'vue' +import type { CardsVariant } from '../types' + +export type UseCardsClassesProps = { + variant: Ref +} + +export function useCardsClasses(props: UseCardsClassesProps): { + cardClasses: Ref, + horizontalImageClasses: Ref +} { + const cardClasses = computed(() => { + if(props.variant.value === '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.value === '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.value === '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.value === '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..63ba195 --- /dev/null +++ b/src/components/Card/types.ts @@ -0,0 +1 @@ +export type CardsVariant = 'default' | 'image' | 'horizontal' diff --git a/src/index.ts b/src/index.ts index c428d4c..89206e9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,9 +13,8 @@ export { default as Avatar } from './components/Avatar/Avatar.vue' export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue' export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue' export { default as Accordion } from './components/Accordion/Accordion.vue' - export { default as Badge } from './components/Badge/Badge.vue' -export { default as Card } from './components/Card/Card.vue' +export { default as TheCard } from './components/Card/TheCard.vue' export { default as Carousel } from './components/Carousel/Carousel.vue' export { default as Footer } from './components/Footer/Footer.vue' export { default as ListGroup } from './components/ListGroup/ListGroup.vue'