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

chore: Eslint fixes

Browse Source
This commit is contained in:
Ilya Artamonov
2022-12-14 22:25:19 +03:00
parent b6a0e125e2
commit 87b50c1fbd
8 changed files with 54 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -45,6 +45,7 @@ function getComponents() {
{ text: 'Carousel', link: 'components/carousel/carousel.md' }, { text: 'Carousel', link: 'components/carousel/carousel.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' }, { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
{ text: 'Progress', link: 'components/progress/progress.md' }, { text: 'Progress', link: 'components/progress/progress.md' },
{ text: 'Rating', link: 'components/rating/rating.md' },
{ text: 'Spinner', link: '/components/spinner/spinner.md' }, { text: 'Spinner', link: '/components/spinner/spinner.md' },
{ text: 'Tabs', link: '/components/tabs/tabs.md' }, { text: 'Tabs', link: '/components/tabs/tabs.md' },
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' }, { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -55,7 +56,6 @@ function getComponents() {
{ text: '- Footer', link: 'components/footer/footer.md' }, { text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' }, { text: '- Pagination', link: 'components/pagination/pagination.md' },
{ text: '- Rating', link: 'components/rating/rating.md' },
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' }, { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
{ text: '- Table', link: 'components/table/table.md' }, { text: '- Table', link: 'components/table/table.md' },
{ text: '- Timeline', link: 'components/timeline/timeline.md' }, { text: '- Timeline', link: 'components/timeline/timeline.md' },

9
docs/components/rating/examples/RatingCountExample.vue
View File

@@ -1,15 +1,14 @@
<template> <template>
<div class="vp-raw flex flex-col"> <div class="vp-raw flex flex-col">
<Rating <Rating
rating=1 :rating="1"
scale=1 :scale="1"
review-text="73 reviews" review-text="73 reviews"
review-link="#" review-link="#"
> >
<template #besideText> <template #besideText>
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p> <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
</template> </template>
</Rating> </Rating>
</div> </div>
</template> </template>

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=4></Rating> <Rating :rating="4" />
</div> </div>
</template> </template>
<script setup> <script setup>

6
docs/components/rating/examples/RatingStarSizesExample.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="vp-raw flex flex-col gap-5"> <div class="vp-raw flex flex-col gap-5">
<!-- Small --> <!-- Small -->
<Rating size="sm" rating=4 ></Rating> <Rating size="sm" :rating="4" />
<!-- Medium --> <!-- Medium -->
<Rating size="md" rating=4></Rating> <Rating size="md" :rating="4" />
<!-- Large --> <!-- Large -->
<Rating size="lg" rating=4></Rating> <Rating size="lg" :rating="4" />
</div> </div>
</template> </template>
<script setup> <script setup>

2
docs/components/rating/examples/RatingWithTextExample.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=4> <Rating :rating="4">
<template #besideText> <template #besideText>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p> <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</template> </template>

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

@@ -13,7 +13,7 @@ Use this simple example of a star rating component for showing review results.
import { Rating } from 'flowbite-vue' import { Rating } from 'flowbite-vue'
</script> </script>
<template> <template>
<Rating rating=4></Rating> <Rating :rating="4" />
</template> </template>
``` ```
@@ -26,7 +26,7 @@ If you also want to show a text near the stars you can use this example as a ref
import { Rating } from 'flowbite-vue' import { Rating } from 'flowbite-vue'
</script> </script>
<template> <template>
<Rating rating=4> <Rating :rating="4">
<template #besideText> <template #besideText>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p> <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</template> </template>
@@ -43,16 +43,15 @@ Aggregate more results by using this example to show the amount of reviews and t
import { Rating } from 'flowbite-vue' import { Rating } from 'flowbite-vue'
</script> </script>
<template> <template>
<Rating <Rating
rating=1 :rating="1"
scale=1 :scale="1"
review-text="73 reviews" review-text="73 reviews"
review-link="#" review-link="#"
> >
<template #besideText> <template #besideText>
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p> <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
</template> </template>
</Rating> </Rating>
</template> </template>
``` ```
@@ -67,11 +66,11 @@ import { Rating } from 'flowbite-vue'
</script> </script>
<template> <template>
<!-- Small --> <!-- Small -->
<Rating size="sm" rating=4 ></Rating> <Rating size="sm" :rating="4" />
<!-- Medium --> <!-- Medium -->
<Rating size="md" rating=4></Rating> <Rating size="md" :rating="4" />
<!-- Large --> <!-- Large -->
<Rating size="lg" rating=4></Rating> <Rating size="lg" :rating="4" />
</template> </template>
``` ```

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

@@ -1,30 +1,41 @@
<template> <template>
<div class="flex items-center"> <div class="flex items-center">
<!-- valid stars --> <!-- valid stars -->
<svg v-for="valid_star_index in valid_star_number" :key="valid_star_index" <svg
class="text-yellow-400" v-for="valid_star_index in valid_star_number"
:class="sizeClasses" :key="valid_star_index"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> class="text-yellow-400"
<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> :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>
<!-- invalid stars --> <!-- invalid stars -->
<svg v-for="invalid_star_index in invalid_star_number" :key="invalid_star_index" <svg
class="text-gray-300 dark:text-gray-500" v-for="invalid_star_index in invalid_star_number"
:class="sizeClasses" :key="invalid_star_index"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> class="text-gray-300 dark:text-gray-500"
<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> :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>
<!-- text --> <!-- text -->
<slot name="besideText"></slot> <slot name="besideText"></slot>
<!-- review link --> <!-- review link -->
<template v-if="(reviewText && reviewLink)"> <template v-if="(reviewText && reviewLink)">
<span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span> <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> <a
:href="reviewLink"
class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
>
{{ reviewText }}
</a>
</template> </template>
</div> </div>
</template> </template>
@@ -36,7 +47,7 @@ import type { RatingSize } from './types'
const props = defineProps({ const props = defineProps({
size: { size: {
type: String as PropType<RatingSize>, // 'sm' | 'md' | 'lg' type: String as PropType<RatingSize>,
default: 'sm', default: 'sm',
}, },
rating: { rating: {
@@ -49,12 +60,12 @@ const props = defineProps({
}, },
reviewText: { reviewText: {
type: String, type: String,
default: "" default: '',
}, },
reviewLink: { reviewLink: {
type: String, type: String,
default: "" default: '',
} },
}) })
const valid_star_number = computed(() => { const valid_star_number = computed(() => {

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

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