review 2 fixes

docs/components/card/card.md

@@ -24,7 +24,7 @@ Use these responsive card components to show data entries and information to you
 import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <the-card :href="'#'"/>
+  <the-card href="#"/>
 </template>
 ```
 
@@ -38,10 +38,10 @@ import { TheCard } from 'flowbite-vue'
 </script>
 <template>
   <the-card 
-    :variant="'image'" 
-    :href="'#'" 
-    :img-src="'./images/blog/image-1.jpg'" 
-    :img-alt="'Image'"
+    variant="image" 
+    href="#" 
+    img-src="./images/blog/image-1.jpg" 
+    img-alt="Image"
   />
 </template>
 ```
@@ -56,10 +56,10 @@ import { TheCard } from 'flowbite-vue'
 </script>
 <template>
   <the-card 
-    :variant="'horizontal'" 
-    :href="'#'" 
-    :img-src="'./images/blog/image-4.jpg'" 
-    :img-alt="'Image'"
+    variant="horizontal" 
+    href="#" 
+    img-src="./images/blog/image-4.jpg" 
+    img-alt="Image"
   />
 </template>
 ```

docs/components/card/examples/CardDefaultExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card :href="'#'">
+    <the-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>
     </the-card>

docs/components/card/examples/CardHorizontalExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card :href="'#'" :variant="'horizontal'" :img-src="'https://flowbite.com/docs/images/blog/image-4.jpg'" :imgAlt="'Desk'">
+    <the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="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>
     </the-card>

docs/components/card/examples/CardImageExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <the-card :href="'#'" :variant="'image'" :img-src="'https://flowbite.com/docs/images/blog/image-1.jpg'" :imgAlt="'Desk'">
+    <the-card href="#" variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="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>
     </the-card>

src/components/Card/TheCard.vue

@@ -1,11 +1,10 @@
 <template>
-  <a :href="href" :class="cardClasses">
+  <component :is="wrapperType" :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>
+  </component>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -32,6 +31,7 @@ const props = defineProps({
   },
 })
 
-const { cardClasses, horizontalImageClasses } = useCardsClasses(props)
+const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))
+const wrapperType = computed(() => props.href ? 'a' : 'div')
 
 </script>

src/components/Card/composables/useCardClasses.ts

@@ -1,9 +1,9 @@
 import type { Ref } from 'vue'
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import type { CardsVariant } from '../types'
 
 export type UseCardsClassesProps = {
-    variant: CardsVariant
+    variant: Ref<CardsVariant>
 }
 
 export function useCardsClasses(props: UseCardsClassesProps): {
@@ -11,17 +11,17 @@ export function useCardsClasses(props: UseCardsClassesProps): {
     horizontalImageClasses: Ref<string>
 } {
     const cardClasses = computed(() => {
-        if(props.variant === 'default') 
+        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 === 'image')
+        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 === 'horizontal')
+        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 === 'horizontal')
+        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 ''
     })

src/index.ts

@@ -13,9 +13,7 @@ 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 Breadcrumb } from './components/Breadcrumb/Breadcrumb.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'