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

add/make 4 rating examples

Browse Source
This commit is contained in:
hirakei1203
2022-12-08 22:56:10 +09:00
parent 56fb0d5bec
commit f565002c69
7 changed files with 142 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,18 @@
<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>
<div class="vp-raw flex flex-col">
<Rating></Rating>
<Rating rating=4></Rating>
</div>
</template>
<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 ></Rating>
<!-- Medium -->
<Rating size="md" rating=4></Rating>
<!-- Large -->
<Rating size="lg" rating=4></Rating>
</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>

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

@@ -1,8 +1,13 @@
<script setup>
import RatingExample from './examples/RatingExample.vue'
import RatingWithTextExample from './examples/RatingWithTextExample.vue'
import RatingCountExample from './examples/RatingCountExample.vue'
import RatingStarSizesExample from './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'
@@ -13,3 +18,42 @@ import { Rating } from 'flowbite-vue'
```
<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>
</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>
</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>
<Rating></Rating>
</template>
```
<RatingStarSizesExample />

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

@@ -1,15 +1,33 @@
<template>
<div class="flex items-center">
<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>
<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>
<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>
<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>
<svg 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>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
<!-- 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="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">73 reviews</a>
<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'
@@ -21,6 +39,30 @@ const props = defineProps({
type: String as PropType<RatingSize>, // 'sm' | 'md' | 'lg'
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))

4
src/components/Rating/composables/useRatingClasses.ts
View File

@@ -9,6 +9,10 @@ const ratingSizeClasses: Record<RatingSize, string> = {
lg: 'w-10 h-10'
}
export type UseRatingClassesProps = {
size: Ref<RatingSize>
}
export function useRatingClasses(props: UseRatingClassesProps):{
sizeClasses: Ref<string>
}{