Merge pull request #90 from themesberg/update_card_docs

Update card docs

docs/.vitepress/config.ts

@@ -40,6 +40,7 @@ function getComponents() {
     { text: 'Button', link: '/components/button/button.md' },
     { text: 'Badge', link: 'components/badge/badge.md' },
     { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
+    { text: 'Card', link: 'components/card/card.md' },
     { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
@@ -47,7 +48,6 @@ function getComponents() {
     { text: 'Toast', link: 'components/toast/toast.md' },
 
     { text: '- Accordion', link: 'components/accordion/accordion.md' },
-    { text: '- Card', link: 'components/card/card.md' },
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Modal', link: 'components/modal/modal.md' },

docs/components/card/card.md

@@ -24,7 +24,12 @@ 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="#">
+    <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>
 </template>
 ```
 
@@ -37,12 +42,12 @@ import { TheCard } from 'flowbite-vue'
 import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <the-card 
+  <the-card variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="Desk">
-    variant="image" 
+    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    href="#" 
+    <p class="font-normal text-gray-700 dark:text-gray-400">
-    img-src="./images/blog/image-1.jpg" 
+      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    img-alt="Image"
+    </p>
-  />
+  </the-card>
 </template>
 ```
 
@@ -55,11 +60,11 @@ import { TheCard } from 'flowbite-vue'
 import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <the-card 
+  <the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="Desk">
-    variant="horizontal" 
+    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-    href="#" 
+    <p class="font-normal text-gray-700 dark:text-gray-400">
-    img-src="./images/blog/image-4.jpg" 
+      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    img-alt="Image"
+    </p>
-  />
+  </the-card>
 </template>
 ```

src/components/Alert/Alert.vue

@@ -28,7 +28,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useAlertClasses } from './composables/useAlertClasses'
-import { onBeforeUnmount, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import type { AlertType } from './types'
 
 
@@ -66,8 +66,4 @@ const visible = ref(true)
 const onCloseClick = () => {
   visible.value = false
 }
-
-onBeforeUnmount(() => {
-  console.log('UNMOUNTED')
-})
 </script>

src/components/Avatar/composables/useAvatarClasses.ts

@@ -65,7 +65,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
 } {
 
     const avatarClasses = computed<string>(() => {
-        console.log('border', props.bordered.value)
         return classNames(
             avatarSizeClasses[props.size.value],
             avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],