Merge branches 'card-component' and 'main' of https://github.com/AhnafAhamed/flowbite-vue into card-component

.gitignore

@@ -84,3 +84,6 @@ jspm_packages/
 .pnp.*
 
 .idea
+
+#
+package-lock.json

docs/.vitepress/config.ts

@@ -95,7 +95,7 @@ export default defineConfig({
 
     footer: {
       message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2022 themesberg'
+      copyright: 'Copyright © 2022 Flowbite™'
     },
 
   },

docs/components/accordion/accordion.md

@@ -1,7 +1,7 @@
 <script setup>
 import AccordionExample from './examples/AccordionExample.vue'
 </script>
-# Accordion
+# Vue Accordion Component - Flowbite
 
 ```vue
 <script setup>

docs/components/alert/alert.md

@@ -7,7 +7,7 @@ import AlertIconExample from './examples/AlertIconExample.vue';
 import AlertInlineExample from './examples/AlertInlineExample.vue';
 </script>
 
-# Alert
+# Vue Alert Component - Flowbite
 
 #### Show contextual information to your users using alert elements based on Tailwind CSS
 

docs/components/avatar/avatar.md

@@ -10,7 +10,7 @@ import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
 import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
 
 </script>
-# Avatar
+# Vue Avatar Component - Flowbite
 Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
 
 ## Default avatar

docs/components/badge/badge.md

@@ -5,7 +5,7 @@ import BadgeLinksExample from './examples/BadgeLinksExample.vue'
 import BadgeIconsExample from './examples/BadgeIconsExample.vue'
 import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue'
 </script>
-# Badge
+# Vue Badge Component - Flowbite
 
 #### Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
 ---

docs/components/breadcrumb/breadcrumb.md

@@ -3,7 +3,7 @@ import BreadcrumbExample from './examples/BreadcrumbExample.vue'
 import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
 import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
 </script>
-# Breadcrumb
+# Vue Breadcrumb Component - Flowbite
 The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
 
 Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.

docs/components/button/button.md

@@ -15,7 +15,7 @@ import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
 import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
 </script>
 
-# Button
+# Vue Button Component - Flowbite
 
 #### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
 
@@ -412,7 +412,7 @@ import { Button } from 'flowbite-vue'
 <template>
   <Button color="default">
     <template #prefix>
-      <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+      <svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
     </template>
     Buy
   </Button>
@@ -431,7 +431,7 @@ import { Button } from 'flowbite-vue'
   <Button color="default">
     Choose plan
     <template #suffix>
-      <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </template>
   </Button>
 </template>

docs/components/buttonGroup/buttonGroup.md

@@ -3,7 +3,7 @@ import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
 import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
 </script>
 
-# Button Group
+# Vue Button Group Component - Flowbite
 
 #### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
 

docs/components/card/card.md

@@ -3,7 +3,7 @@ import CardDefaultExample from './examples/CardDefaultExample.vue'
 import CardImageExample from './examples/CardImageExample.vue'
 import CardHorizontalExample from './examples/CardHorizontalExample.vue'
 </script>
-# Card
+# Vue Card Components - Flowbite
 
 #### Get started with a large variety of Tailwind CSS card examples for your web project
 

docs/components/carousel/carousel.md

@@ -1,7 +1,7 @@
 <script setup>
 import CarouselExample from './examples/CarouselExample.vue'
 </script>
-# Carousel
+# Vue Carousel Component - Flowbite
 
 ```vue
 <script setup>

docs/components/dropdown/dropdown.md

@@ -4,7 +4,7 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
 import DropdownTriggerExample from './examples/DropdownTriggerExample.vue';
 </script>
 
-# Dropdown
+# Vue Dropdown Component - Flowbite
 
 #### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
 
@@ -32,7 +32,7 @@ import { Dropdown } from 'flowbite-vue'
       <Button @click="toggle">
         Top
         <template #suffix>
-          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
         </template>
       </Button>
     </template>

docs/components/flowbiteThemable/flowbiteThemable.md

@@ -6,7 +6,7 @@ import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemabl
 import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
 </script>
 
-# Flowbite Themable
+# Vue Themable Configuration - Flowbite
 
 You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
 

docs/components/footer/footer.md

@@ -1,7 +1,7 @@
 <script setup>
 import FooterExample from './examples/FooterExample.vue'
 </script>
-# Footer
+# Vue Footer Component - Flowbite
 
 ```vue
 <script setup>

docs/components/input/input.md

@@ -7,7 +7,7 @@ import InputPrefixExample from './examples/InputPrefixExample.vue';
 import InputSuffixExample from './examples/InputSuffixExample.vue'
 </script>
 
-# Input
+# Vue Input Components - Flowbite
 
 #### Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types
 

docs/components/listGroup/listGroup.md

@@ -5,7 +5,7 @@ import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
 import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
 </script>
 
-# ListGroup
+# Vue List Group Component - Flowbite
 
 #### Use the list group component to display a series of items, buttons or links inside a single element
 

docs/components/modal/modal.md

@@ -1,7 +1,7 @@
 <script setup>
 import ModalExample from './examples/ModalExample.vue'
 </script>
-# Modal
+# Vue Modal Component - Flowbite
 
 ```vue
 <script setup>

docs/components/navbar/navbar.md

@@ -1,7 +1,7 @@
 <script setup>
 import NavbarExample from './examples/NavbarExample.vue'
 </script>
-# Navbar
+# Vue Navbar Component - Flowbite
 
 ```vue
 <script setup>

docs/components/pagination/pagination.md

@@ -1,7 +1,7 @@
 <script setup>
 import PaginationExample from './examples/PaginationExample.vue'
 </script>
-# Pagination
+# Vue Pagination Component - Flowbite
 
 ```vue
 <script setup>

docs/components/progress/progress.md

@@ -1,7 +1,7 @@
 <script setup>
 import ProgressExample from './examples/ProgressExample.vue'
 </script>
-# Progress
+# Vue Progress Bar Component - Flowbite
 
 ```vue
 <script setup>

docs/components/rating/rating.md

@@ -1,7 +1,7 @@
 <script setup>
 import RatingExample from './examples/RatingExample.vue'
 </script>
-# Rating
+# Vue Rating Component - Flowbite
 
 ```vue
 <script setup>

docs/components/sidebar/sidebar.md

@@ -1,7 +1,7 @@
 <script setup>
 import SidebarExample from './examples/SidebarExample.vue'
 </script>
-# Sidebar
+# Vue Sidebar Component - Flowbite
 
 ```vue
 <script setup>

docs/components/spinner/spinner.md

@@ -4,7 +4,7 @@ import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
 import SpinnerColorExample from './examples/SpinnerColorExample.vue';
 </script>
 
-# Spinner
+# Vue Spinner Component - Flowbite
 
 #### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
 

docs/components/table/table.md

@@ -1,7 +1,7 @@
 <script setup>
 import TableExample from './examples/TableExample.vue'
 </script>
-# Table
+# Vue Table Component - Flowbite
 
 ```vue
 <script setup>

docs/components/tabs/tabs.md

@@ -4,7 +4,7 @@ import TabsPillsExample from './examples/TabsPillsExample.vue';
 import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
 </script>
 
-# Tabs
+# Vue Tabs Component - Flowbite
 
 #### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
 

docs/components/timeline/timeline.md

@@ -1,7 +1,7 @@
 <script setup>
 import TimelineExample from './examples/TimelineExample.vue'
 </script>
-# Timeline
+# Vue Timeline Component - Flowbite
 
 ```vue
 <script setup>

docs/components/toast/toast.md

@@ -6,7 +6,7 @@ import ToastDivideExample from './examples/ToastDivideExample.vue';
 import ToastMessageExample from './examples/ToastMessageExample.vue';
 import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
 </script>
-# Toast
+# Vue Toast Component - Flowbite
 
 #### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
 

docs/components/toastProvider/toastProvider.md

@@ -1,6 +1,6 @@
 <script setup>
 import ToastProviderExample from './examples/ToastProviderExample.vue';
 </script>
-# Toast provider
+# Vue Toast Provider - Flowbite
 
 <ToastProviderExample />

docs/components/tooltip/tooltip.md

@@ -1,7 +1,7 @@
 <script setup>
 import TooltipExample from './examples/TooltipExample.vue'
 </script>
-# Tooltip
+# Vue Tooltip Component - Flowbite
 
 ```vue
 <script setup>

docs/index.md

@@ -6,7 +6,7 @@ titleTemplate: Flowbite
 
 hero:
   name: Flowbite Vue 3
-  text: Tailwind CSS Vue based component library
+  text: Vue component library based on Tailwind CSS
   tagline: Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
   actions:
     - theme: brand
@@ -15,4 +15,14 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/themesberg/flowbite-vue
+
+features:
+  - title: Vue 3 components 🧱
+    details: Use hundreds of open-source components such as navbars, modals, and dropdowns based on Vue 3 and Tailwind CSS.
+  - title: Based on Tailwind CSS 💨
+    details: The components are based on the utility classes from Tailwind CSS and you can use them to further customize the interface.
+  - title: Powered by Flowbite 🚀
+    details: The Flowbite Vue library is based on the original Flowbite component library using vanilla JavaScript.
+  - title: Open-source community ❤️
+    details: Thousands of developers actively use the components from Flowbite Vue to power their applications.
 ---