Merge branch 'main' into feat_table

# Conflicts:
#	docs/.vitepress/config.ts
#	docs/components/table.md

.github/workflows/node.js.yml

@@ -0,0 +1,55 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  docs-build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm run build
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm run lint
+  build-pkg:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm run build:package

docs/.vitepress/config.ts

@@ -34,45 +34,44 @@ function buildSidebar() {
 
 function getComponents() {
   return [
-    { text: 'Accordion', link: 'components/accordion/accordion.md' },
-    { text: 'Alert', link: '/components/alert/alert.md' },
-    { text: 'Avatar', link: 'components/avatar/avatar.md' },
-    { text: 'Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
-    { 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: 'Carousel', link: 'components/carousel/carousel.md' },
-    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
-    { text: 'Progress', link: 'components/progress/progress.md' },
-    { text: 'Spinner', link: '/components/spinner/spinner.md' },
-    { text: 'Table', link: 'components/table/table.md' },
-    { text: 'Tabs', link: '/components/tabs/tabs.md' },
-    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
-    { text: 'Toast', link: 'components/toast/toast.md' },
-    { text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
-    { text: 'Modal', link: 'components/modal/modal.md' },
-    { text: 'Navbar', link: 'components/navbar/navbar.md' },
+    { text: 'Accordion', link: 'components/accordion' },
+    { text: 'Alert', link: '/components/alert' },
+    { text: 'Avatar', link: 'components/avatar' },
+    { text: 'Breadcrumb', link: 'components/breadcrumb' },
+    { text: 'Button', link: '/components/button' },
+    { text: 'Badge', link: 'components/badge' },
+    { text: 'Button Group', link: '/components/button-group' },
+    { text: 'Card', link: 'components/card.md' },
+    { text: 'Carousel', link: 'components/carousel' },
+    { text: 'Dropdown', link: '/components/dropdown' },
+    { text: 'Progress', link: 'components/progress' },
+    { text: 'Rating', link: 'components/rating' },
+    { text: 'Spinner', link: '/components/spinner' },
+    { text: 'Table', link: 'components/table' },
+    { text: 'Tabs', link: '/components/tabs' },
+    { text: 'ListGroup', link: 'components/list-group' },
+    { text: 'Toast', link: 'components/toast' },
+    { text: 'Tooltip', link: 'components/tooltip' },
+    { text: 'Modal', link: 'components/modal' },
+    { text: 'Navbar', link: 'components/navbar' },
 
-    { text: '- Footer', link: 'components/footer/footer.md' },
-    { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Rating', link: 'components/rating/rating.md' },
-    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
-    { text: '- Timeline', link: 'components/timeline/timeline.md' },
+    { text: '- Footer', link: 'components/footer' },
+    { text: '- Pagination', link: 'components/pagination' },
+    { text: '- Sidebar', link: 'components/sidebar' },
+    { text: '- Timeline', link: 'components/timeline' },
   ]
 }
 
 function getFormComponents() {
   return [
-    { text: 'Input', link: 'components/input/input.md' },
+    { text: 'Input', link: 'components/input' },
   ]
 }
 
 function getUtils() {
   return [
     { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
-    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
-    { text: 'PLAYGROUND', link: '/components/PLAYGROUND/PLAYGROUND.md' },
+    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' }
   ]
 }
 

docs/components/accordion.md

@@ -1,8 +1,8 @@
 <script setup>
-import AccordionExample from './examples/AccordionExample.vue';
-import AccordionAlwaysOpenExample from './examples/AccordionAlwaysOpenExample.vue';
-import AccordionFlushExample from './examples/AccordionFlushExample.vue';
-import AccordionStyledHeadersExample from './examples/AccordionStyledHeadersExample.vue';
+import AccordionExample from './accordion/examples/AccordionExample.vue';
+import AccordionAlwaysOpenExample from './accordion/examples/AccordionAlwaysOpenExample.vue';
+import AccordionFlushExample from './accordion/examples/AccordionFlushExample.vue';
+import AccordionStyledHeadersExample from './accordion/examples/AccordionStyledHeadersExample.vue';
 </script>
 # Vue Accordion Component - Flowbite
 
@@ -14,7 +14,7 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 :::
 
 ## Default accordion
-Use this example to basic accordion. 
+Use this example to basic accordion.
 ```vue
 <script setup>
 import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'

docs/components/alert.md

@@ -1,10 +1,10 @@
 <script setup>
-import AlertTypeExample from './examples/AlertTypeExample.vue';
-import AlertTitleExample from './examples/AlertTitleExample.vue';
-import AlertClosableExample from './examples/AlertClosableExample.vue';
-import AlertBorderExample from './examples/AlertBorderExample.vue';
-import AlertIconExample from './examples/AlertIconExample.vue';
-import AlertInlineExample from './examples/AlertInlineExample.vue';
+import AlertTypeExample from './alert/examples/AlertTypeExample.vue';
+import AlertTitleExample from './alert/examples/AlertTitleExample.vue';
+import AlertClosableExample from './alert/examples/AlertClosableExample.vue';
+import AlertBorderExample from './alert/examples/AlertBorderExample.vue';
+import AlertIconExample from './alert/examples/AlertIconExample.vue';
+import AlertInlineExample from './alert/examples/AlertInlineExample.vue';
 </script>
 
 # Vue Alert Component - Flowbite
@@ -29,7 +29,7 @@ defineProps({
     type: {
         type: String as PropType<AlertType>,
         default: 'info',
-    }, 
+    },
 })
 ```
 
@@ -58,7 +58,7 @@ defineProps({
     title: {
         type: String,
         default: '',
-    }, 
+    },
 })
 ```
 
@@ -87,7 +87,7 @@ defineProps({
     closable: {
         type: Boolean,
         default: false,
-    }, 
+    },
 })
 ```
 
@@ -116,7 +116,7 @@ defineProps({
     border: {
         type: Boolean,
         default: false,
-    }, 
+    },
 })
 ```
 
@@ -145,7 +145,7 @@ defineProps({
     icon: {
         type: Boolean,
         default: true,
-    }, 
+    },
 })
 ```
 
@@ -174,7 +174,7 @@ defineProps({
     inline: {
         type: Boolean,
         default: true,
-    }, 
+    },
 })
 ```
 

docs/components/avatar.md

@@ -1,13 +1,13 @@
 <script setup>
-import AvatarExample from './examples/AvatarExample.vue'
-import AvatarBorderedExample from './examples/AvatarBorderedExample.vue'
-import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue'
-import AvatarSizeExample from './examples/AvatarSizeExample.vue'
-import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
-import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
-import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
-import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
-import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
+import AvatarExample from './avatar/examples/AvatarExample.vue'
+import AvatarBorderedExample from './avatar/examples/AvatarBorderedExample.vue'
+import AvatarDotIndicatorExample from './avatar/examples/AvatarDotIndicatorExample.vue'
+import AvatarSizeExample from './avatar/examples/AvatarSizeExample.vue'
+import AvatarDotIndicatorPositionExample from './avatar/examples/AvatarDotIndicatorPositionExample.vue'
+import AvatarAlternativeTextExample from './avatar/examples/AvatarAlternativeTextExample.vue'
+import StackedAvatarsExample from './avatar/examples/StackedAvatarsExample.vue'
+import AvatarPlaceholderExample from './avatar/examples/AvatarPlaceholderExample.vue'
+import AvatarPlaceholderInitialsExample from './avatar/examples/AvatarPlaceholderInitialsExample.vue'
 
 </script>
 # Vue Avatar Component - Flowbite

docs/components/badge.md

@@ -1,9 +1,9 @@
 <script setup>
-import BadgeTypesExample from './examples/BadgeTypesExample.vue'
-import BadgeSizesExample from './examples/BadgeSizesExample.vue'
-import BadgeLinksExample from './examples/BadgeLinksExample.vue'
-import BadgeIconsExample from './examples/BadgeIconsExample.vue'
-import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue'
+import BadgeTypesExample from './badge/examples/BadgeTypesExample.vue'
+import BadgeSizesExample from './badge/examples/BadgeSizesExample.vue'
+import BadgeLinksExample from './badge/examples/BadgeLinksExample.vue'
+import BadgeIconsExample from './badge/examples/BadgeIconsExample.vue'
+import BadgeOnlyIconsExample from './badge/examples/BadgeOnlyIconsExample.vue'
 </script>
 # Vue Badge Component - Flowbite
 

docs/components/breadcrumb.md

@@ -1,7 +1,7 @@
 <script setup>
-import BreadcrumbExample from './examples/BreadcrumbExample.vue'
-import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
-import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
+import BreadcrumbExample from './breadcrumb/examples/BreadcrumbExample.vue'
+import BreadcrumbSolidExample from './breadcrumb/examples/BreadcrumbSolidExample.vue'
+import BreadcrumbCustomIconsExample from './breadcrumb/examples/BreadcrumbCustomIconsExample.vue'
 </script>
 # 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.

docs/components/button-group.md

@@ -1,6 +1,6 @@
 <script setup>
-import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
-import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
+import ButtonGroupBasicExample from './buttonGroup/examples/ButtonGroupBasicExample.vue';
+import ButtonGroupIconExample from './buttonGroup/examples/ButtonGroupIconExample.vue';
 </script>
 
 # Vue Button Group Component - Flowbite

docs/components/button.md

@@ -1,18 +1,18 @@
 <script setup>
-import ButtonColorExample from './examples/ButtonColorExample.vue';
-import ButtonSizeExample from './examples/ButtonSizeExample.vue';
-import ButtonPillExample from './examples/ButtonPillExample.vue';
-import ButtonGradientMonochromeExample from './examples/ButtonGradientMonochromeExample.vue';
-import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExample.vue';
-import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
-import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
-import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
-import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
-import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
-import ButtonIconExample from './examples/ButtonIconExample.vue';
-import ButtonSquareExample from './examples/ButtonSquareExample.vue';
-import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
-import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
+import ButtonColorExample from './button/examples/ButtonColorExample.vue';
+import ButtonSizeExample from './button/examples/ButtonSizeExample.vue';
+import ButtonPillExample from './button/examples/ButtonPillExample.vue';
+import ButtonGradientMonochromeExample from './button/examples/ButtonGradientMonochromeExample.vue';
+import ButtonGradientDuotoneExample from './button/examples/ButtonGradientDuotoneExample.vue';
+import ButtonOutlineColorExample from './button/examples/ButtonOutlineColorExample.vue';
+import ButtonPrefixExample from './button/examples/ButtonPrefixExample.vue';
+import ButtonSuffixExample from './button/examples/ButtonSuffixExample.vue';
+import ButtonOutlineGradientExample from './button/examples/ButtonOutlineGradientExample.vue';
+import ButtonGradientShadowExample from './button/examples/ButtonGradientShadowExample.vue';
+import ButtonIconExample from './button/examples/ButtonIconExample.vue';
+import ButtonSquareExample from './button/examples/ButtonSquareExample.vue';
+import ButtonDisabledExample from './button/examples/ButtonDisabledExample.vue';
+import ButtonLoadingExample from './button/examples/ButtonLoadingExample.vue';
 </script>
 
 # Vue Button Component - Flowbite
@@ -37,7 +37,7 @@ defineProps({
     color: {
         type: String as PropType<ButtonVariant>,
         default: 'default',
-    }, 
+    },
 })
 ```
 

docs/components/card.md

@@ -1,7 +1,7 @@
 <script setup>
-import CardDefaultExample from './examples/CardDefaultExample.vue'
-import CardImageExample from './examples/CardImageExample.vue'
-import CardHorizontalExample from './examples/CardHorizontalExample.vue'
+import CardDefaultExample from './card/examples/CardDefaultExample.vue'
+import CardImageExample from './card/examples/CardImageExample.vue'
+import CardHorizontalExample from './card/examples/CardHorizontalExample.vue'
 </script>
 # Vue Card Components - Flowbite
 

docs/components/carousel.md

@@ -1,10 +1,10 @@
 <script setup>
-import CarouselDefaultExample from './examples/CarouselDefaultExample.vue';
-import CarouselNoControlsExample from './examples/CarouselNoControlsExample.vue';
-import CarouselNoIndicatorsExample from './examples/CarouselNoIndicatorsExample.vue';
-import CarouselSlideExample from './examples/CarouselSlideExample.vue';
-import CarouselSlideIntervalExample from './examples/CarouselSlideIntervalExample.vue';
-import CarouselPicturesExample from './examples/CarouselPicturesExample.vue';
+import CarouselDefaultExample from './carousel/examples/CarouselDefaultExample.vue';
+import CarouselNoControlsExample from './carousel/examples/CarouselNoControlsExample.vue';
+import CarouselNoIndicatorsExample from './carousel/examples/CarouselNoIndicatorsExample.vue';
+import CarouselSlideExample from './carousel/examples/CarouselSlideExample.vue';
+import CarouselSlideIntervalExample from './carousel/examples/CarouselSlideIntervalExample.vue';
+import CarouselPicturesExample from './carousel/examples/CarouselPicturesExample.vue';
 </script>
 # Vue Carousel Component - Flowbite
 
@@ -166,4 +166,4 @@ const pictures = [
 <template>
   <Carousel :pictures="pictures"></Carousel>
 </template>
-```
+```

docs/components/dropdown.md

@@ -1,7 +1,7 @@
 <script setup>
-import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
-import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
-import DropdownTriggerExample from './examples/DropdownTriggerExample.vue';
+import DropdownPlacementExample from './dropdown/examples/DropdownPlacementExample.vue';
+import DropdownListGroupExample from './dropdown/examples/DropdownListGroupExample.vue';
+import DropdownTriggerExample from './dropdown/examples/DropdownTriggerExample.vue';
 </script>
 
 # Vue Dropdown Component - Flowbite

docs/components/footer.md

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

docs/components/input.md

@@ -1,10 +1,10 @@
 <script setup>
-import InputExample from './examples/InputExample.vue';
-import InputSizeExample from './examples/InputSizeExample.vue';
-import InputDisabledExample from './examples/InputDisabledExample.vue';
-import InputHelperExample from './examples/InputHelperExample.vue';
-import InputPrefixExample from './examples/InputPrefixExample.vue';
-import InputSuffixExample from './examples/InputSuffixExample.vue'
+import InputExample from './input/examples/InputExample.vue';
+import InputSizeExample from './input/examples/InputSizeExample.vue';
+import InputDisabledExample from './input/examples/InputDisabledExample.vue';
+import InputHelperExample from './input/examples/InputHelperExample.vue';
+import InputPrefixExample from './input/examples/InputPrefixExample.vue';
+import InputSuffixExample from './input/examples/InputSuffixExample.vue'
 </script>
 
 # Vue Input Components - Flowbite

docs/components/list-group.md

@@ -1,8 +1,8 @@
 <script setup>
-import ListGroupExample from './examples/ListGroupExample.vue'
-import ListGroupHoverExample from './examples/ListGroupHoverExample.vue'
-import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
-import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
+import ListGroupExample from './listGroup/examples/ListGroupExample.vue'
+import ListGroupHoverExample from './listGroup/examples/ListGroupHoverExample.vue'
+import ListGroupHoverIconExample from './listGroup/examples/ListGroupHoverIconExample.vue'
+import ListGroupHoverIconDisabledExample from './listGroup/examples/ListGroupHoverIconDisabledExample.vue'
 </script>
 
 # Vue List Group Component - Flowbite

docs/components/modal.md

@@ -1,6 +1,6 @@
 <script setup>
-import ModalExample from './examples/ModalExample.vue';
-import ModalSizeExample from './examples/ModalSizeExample.vue';
+import ModalExample from './modal/examples/ModalExample.vue';
+import ModalSizeExample from './modal/examples/ModalSizeExample.vue';
 </script>
 # Vue Modal Component - Flowbite
 

docs/components/navbar.md

@@ -1,8 +1,8 @@
 <script setup>
-import NavbarExample from './examples/NavbarExample.vue'
-import NavbarSolidExample from './examples/NavbarSolidExample.vue'
-import NavbarActionButtonExample from './examples/NavbarActionButtonExample.vue'
-import NavbarCustomMobileIconExample from './examples/NavbarCustomMobileIconExample.vue'
+import NavbarExample from './navbar/examples/NavbarExample.vue'
+import NavbarSolidExample from './navbar/examples/NavbarSolidExample.vue'
+import NavbarActionButtonExample from './navbar/examples/NavbarActionButtonExample.vue'
+import NavbarCustomMobileIconExample from './navbar/examples/NavbarCustomMobileIconExample.vue'
 
 </script>
 # Navbar Component – Flowbite

docs/components/pagination.md

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

docs/components/progress.md

@@ -1,9 +1,9 @@
 <script setup>
-import ProgressExample from './examples/ProgressExample.vue'
-import ProgressSizeExample from './examples/ProgressSizeExample.vue'
-import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
-import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
-import ProgressColorExample from './examples/ProgressColorExample.vue'
+import ProgressExample from './progress/examples/ProgressExample.vue'
+import ProgressSizeExample from './progress/examples/ProgressSizeExample.vue'
+import ProgressInsideLabelExample from './progress/examples/ProgressInsideLabelExample.vue'
+import ProgressOutsideLabelExample from './progress/examples/ProgressOutsideLabelExample.vue'
+import ProgressColorExample from './progress/examples/ProgressColorExample.vue'
 
 
 </script>
@@ -99,4 +99,4 @@ import { Progress } from 'flowbite-vue'
 </template>
 ```
 
-<ProgressColorExample />
+<ProgressColorExample />

docs/components/rating.md

@@ -0,0 +1,77 @@
+<script setup>
+import RatingExample from './rating/examples/RatingExample.vue'
+import RatingWithTextExample from './rating/examples/RatingWithTextExample.vue'
+import RatingCountExample from './rating/examples/RatingCountExample.vue'
+import RatingStarSizesExample from './rating/examples/RatingStarSizesExample.vue'
+</script>
+# Vue Rating Component - Flowbite
+
+## Default rating
+Use this simple example of a star rating component for showing review results.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+    <Rating :rating="4" />
+</template>
+```
+
+<RatingExample />
+
+## Rating with text
+If you also want to show a text near the stars you can use this example as a reference.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+    <Rating :rating="4">
+      <template #besideText>
+          <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
+        </template>
+    </Rating>
+</template>
+```
+
+<RatingWithTextExample />
+
+## Rating count
+Aggregate more results by using this example to show the amount of reviews and the average score.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+    <Rating
+      :rating="1"
+      :scale="1"
+      review-text="73 reviews"
+      review-link="#"
+    >
+      <template #besideText>
+        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
+      </template>
+    </Rating>
+</template>
+```
+
+<RatingCountExample />
+
+## Star sizes
+Check out the different sizing options for the star review component from small, medium, and large.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+    <!-- Small -->
+    <Rating size="sm" :rating="4" />
+    <!-- Medium -->
+    <Rating size="md" :rating="4" />
+    <!-- Large -->
+    <Rating size="lg" :rating="4" />
+</template>
+```
+
+<RatingStarSizesExample />

docs/components/rating/examples/RatingCountExample.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Rating
+      :rating="1"
+      :scale="1"
+      review-text="73 reviews"
+      review-link="#"
+    >
+      <template #besideText>
+        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
+      </template>
+    </Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/examples/RatingExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Rating></Rating>
+    <Rating :rating="4" />
   </div>
 </template>
 <script setup>

docs/components/rating/examples/RatingStarSizesExample.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex flex-col gap-5">
+    <!-- Small -->
+    <Rating size="sm" :rating="4" />
+    <!-- Medium -->
+    <Rating size="md" :rating="4" />
+    <!-- Large -->
+    <Rating size="lg" :rating="4" />
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/examples/RatingWithTextExample.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Rating :rating="4">
+      <template #besideText>
+          <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
+        </template>
+    </Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/rating.md

@@ -1,15 +0,0 @@
-<script setup>
-import RatingExample from './examples/RatingExample.vue'
-</script>
-# Vue Rating Component - Flowbite
-
-```vue
-<script setup>
-import { Rating } from 'flowbite-vue'
-</script>
-<template>
-  <Rating></Rating>
-</template>
-```
-
-<RatingExample />

docs/components/sidebar.md

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

docs/components/spinner.md

@@ -1,7 +1,7 @@
 <script setup>
-import SpinnerBasicExample from './examples/SpinnerBasicExample.vue';
-import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
-import SpinnerColorExample from './examples/SpinnerColorExample.vue';
+import SpinnerBasicExample from './spinner/examples/SpinnerBasicExample.vue';
+import SpinnerSizeExample from './spinner/examples/SpinnerSizeExample.vue';
+import SpinnerColorExample from './spinner/examples/SpinnerColorExample.vue';
 </script>
 
 # Vue Spinner Component - Flowbite

docs/components/table.md

@@ -1,8 +1,8 @@
 <script setup>
-import TableExample from './examples/TableExample.vue';
-import TableStripedExample from './examples/TableStripedExample.vue';
-import TableStripedColumnsExample from './examples/TableStripedColumnsExample.vue';
-import TableHoverableExample from './examples/TableHoverableExample.vue';
+import TableExample from './table/examples/TableExample.vue';
+import TableStripedExample from './table/examples/TableStripedExample.vue';
+import TableStripedColumnsExample from './table/examples/TableStripedColumnsExample.vue';
+import TableHoverableExample from './table/examples/TableHoverableExample.vue';
 </script>
 # Vue Table Component - Flowbite
 

docs/components/tabs.md

@@ -1,7 +1,7 @@
 <script setup>
-import TabsDefaultExample from './examples/TabsDefaultExample.vue';
-import TabsPillsExample from './examples/TabsPillsExample.vue';
-import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
+import TabsDefaultExample from './tabs/examples/TabsDefaultExample.vue';
+import TabsPillsExample from './tabs/examples/TabsPillsExample.vue';
+import TabsUnderlineExample from './tabs/examples/TabsUnderlineExample.vue';
 </script>
 
 # Vue Tabs Component - Flowbite

docs/components/timeline.md

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

docs/components/toast.md

@@ -1,10 +1,10 @@
 <script setup>
-import ToastTypeExample from './examples/ToastTypeExample.vue';
-import ToastClosableExample from './examples/ToastClosableExample.vue';
-import ToastIconExample from './examples/ToastIconExample.vue';
-import ToastDivideExample from './examples/ToastDivideExample.vue';
-import ToastMessageExample from './examples/ToastMessageExample.vue';
-import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
+import ToastTypeExample from './toast/examples/ToastTypeExample.vue';
+import ToastClosableExample from './toast/examples/ToastClosableExample.vue';
+import ToastIconExample from './toast/examples/ToastIconExample.vue';
+import ToastDivideExample from './toast/examples/ToastDivideExample.vue';
+import ToastMessageExample from './toast/examples/ToastMessageExample.vue';
+import ToastInteractiveExample from './toast/examples/ToastInteractiveExample.vue'
 </script>
 # Vue Toast Component - Flowbite
 

docs/components/tooltip.md

@@ -1,8 +1,8 @@
 <script setup>
-import TooltipExample from './examples/TooltipExample.vue'
-import TooltipPositionExample from './examples/TooltipPositionExample.vue'
-import TooltipStyleExample from './examples/TooltipStyleExample.vue'
-import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
+import TooltipExample from './tooltip/examples/TooltipExample.vue'
+import TooltipPositionExample from './tooltip/examples/TooltipPositionExample.vue'
+import TooltipStyleExample from './tooltip/examples/TooltipStyleExample.vue'
+import TooltipTriggerExample from './tooltip/examples/TooltipTriggerExample.vue'
 </script>
 # Vue Tooltip Component - Flowbite
 

package.json

@@ -28,7 +28,8 @@
     "build:package": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly && tsc-alias -p tsconfig.json",
     "build:production": "npm run build:types && npm run build:package",
-    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore",
+    "lint-fix": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
     "clear": "rm -fr ./dist && rm -fr ./dist_types",
     "format": "prettier .  --write",
     "test": "vitest",

src/components/Rating/Rating.vue

@@ -1,21 +1,81 @@
 <template>
   <div class="flex items-center">
-    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
-    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
-    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
-    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
-    <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+    <!-- valid stars -->
+    <svg
+      v-for="valid_star_index in valid_star_number"
+      :key="valid_star_index"
+      class="text-yellow-400"
+      :class="sizeClasses"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+    </svg>
+    <!-- invalid stars -->
+    <svg
+      v-for="invalid_star_index in invalid_star_number"
+      :key="invalid_star_index"
+      class="text-gray-300 dark:text-gray-500"
+      :class="sizeClasses"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+    </svg>
+    <!-- text -->
+    <slot name="besideText"></slot>
+    <!-- review link -->
+    <template v-if="(reviewText && reviewLink)">
+      <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span>
+      <a
+        :href="reviewLink"
+        class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
+      >
+        {{ reviewText }}
+      </a>
+    </template>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
+import { useRatingClasses } from './composables/useRatingClasses'
+import type { RatingSize } from './types'
 
 const props = defineProps({
   size: {
-    type: String, // 'sm' | 'md' | 'lg'
+    type: String as PropType<RatingSize>,
     default: 'sm',
   },
+  rating: {
+    type: Number,
+    default: 3,
+  },
+  scale: {
+    type: Number,
+    default: 5,
+  },
+  reviewText: {
+    type: String,
+    default: '',
+  },
+  reviewLink: {
+    type: String,
+    default: '',
+  },
 })
 
+const valid_star_number = computed(() => {
+  return Math.floor(props.rating)
+})
+
+const invalid_star_number = computed(() => {
+  return props.scale - valid_star_number.value
+})
+
+const { sizeClasses } = useRatingClasses(toRefs(props))
+
 </script>

src/components/Rating/composables/useRatingClasses.ts

@@ -0,0 +1,28 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { RatingSize } from '../types'
+
+const ratingSizeClasses: Record<RatingSize, string> = {
+  sm: 'w-5 h-5',
+  md: 'w-7 h-7',
+  lg: 'w-10 h-10',
+}
+
+export type UseRatingClassesProps = {
+  size: Ref<RatingSize>
+}
+
+export function useRatingClasses(props: UseRatingClassesProps):{
+  sizeClasses: Ref<string>
+}{
+  const sizeClasses = computed(() => {
+    return classNames(
+        ratingSizeClasses[props.size.value] ?? '',
+    )
+  })
+
+  return {
+    sizeClasses,
+  }
+}

src/components/Rating/types.ts

@@ -0,0 +1 @@
+export type RatingSize = 'sm' | 'md' | 'lg'