jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into feat_table

Browse Source 
# Conflicts:
#	docs/.vitepress/config.ts
#	docs/components/table.md
This commit is contained in:
victor
2022-12-15 11:19:54 +04:00
parent 8b619ae08c 63c97e113e
commit f2b776f86e
36 changed files with 408 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
.github/workflows/node.js.yml vendored Normal file
View File

@@ -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

53
docs/.vitepress/config.ts
View File

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

10
docs/components/accordion/accordion.md → docs/components/accordion.md
View File

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

24
docs/components/alert/alert.md → docs/components/alert.md
View File

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

18
docs/components/avatar/avatar.md → docs/components/avatar.md
View File

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

10
docs/components/badge/badge.md → docs/components/badge.md
View File

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

6
docs/components/breadcrumb/breadcrumb.md → docs/components/breadcrumb.md
View File

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

4
docs/components/buttonGroup/buttonGroup.md → docs/components/button-group.md
View File

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

30
docs/components/button/button.md → docs/components/button.md
View File

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

6
docs/components/card/card.md → docs/components/card.md
View File

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

14
docs/components/carousel/carousel.md → docs/components/carousel.md
View File

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

6
docs/components/dropdown/dropdown.md → docs/components/dropdown.md
View File

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

2
docs/components/footer/footer.md → docs/components/footer.md
View File

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

12
docs/components/input/input.md → docs/components/input.md
View File

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

8
docs/components/listGroup/listGroup.md → docs/components/list-group.md
View File

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

4
docs/components/modal/modal.md → docs/components/modal.md
View File

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

8
docs/components/navbar/navbar.md → docs/components/navbar.md
View File

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

2
docs/components/pagination/pagination.md → docs/components/pagination.md
View File

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

12
docs/components/progress/progress.md → docs/components/progress.md
View File

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

77
docs/components/rating.md Normal file
View File

@@ -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 />

17
docs/components/rating/examples/RatingCountExample.vue Normal file
View File

@@ -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>

2
docs/components/rating/examples/RatingExample.vue
View File

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

13
docs/components/rating/examples/RatingStarSizesExample.vue Normal file
View File

@@ -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>

12
docs/components/rating/examples/RatingWithTextExample.vue Normal file
View File

@@ -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>

15
docs/components/rating/rating.md
View File

@@ -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 />

2
docs/components/sidebar/sidebar.md → docs/components/sidebar.md
View File

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

6
docs/components/spinner/spinner.md → docs/components/spinner.md
View File

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

8
docs/components/table/table.md → docs/components/table.md
View File

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

6
docs/components/tabs/tabs.md → docs/components/tabs.md
View File

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

2
docs/components/timeline/timeline.md → docs/components/timeline.md
View File

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

12
docs/components/toast/toast.md → docs/components/toast.md
View File

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

8
docs/components/tooltip/tooltip.md → docs/components/tooltip.md
View File

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

3
package.json
View File

@@ -28,7 +28,8 @@
"build:package": "vite build", "build:package": "vite build",
"build:types": "vue-tsc --declaration --emitDeclarationOnly && tsc-alias -p tsconfig.json", "build:types": "vue-tsc --declaration --emitDeclarationOnly && tsc-alias -p tsconfig.json",
"build:production": "npm run build:types && npm run build:package", "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", "clear": "rm -fr ./dist && rm -fr ./dist_types",
"format": "prettier . --write", "format": "prettier . --write",
"test": "vitest", "test": "vitest",

72
src/components/Rating/Rating.vue
View File

@@ -1,21 +1,81 @@
<template> <template>
<div class="flex items-center"> <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> <!-- valid stars -->
<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
<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> v-for="valid_star_index in valid_star_number"
<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> :key="valid_star_index"
<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> 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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, toRefs } from 'vue' import { computed, toRefs } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { useRatingClasses } from './composables/useRatingClasses'
import type { RatingSize } from './types'
const props = defineProps({ const props = defineProps({
size: { size: {
type: String, // 'sm' | 'md' | 'lg' type: String as PropType<RatingSize>,
default: 'sm', 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> </script>

28
src/components/Rating/composables/useRatingClasses.ts Normal file
View File

@@ -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,
}
}

1
src/components/Rating/types.ts Normal file
View File

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