chore: Eslint fixes

docs/.vitepress/config.ts

@@ -45,6 +45,7 @@ function getComponents() {
     { text: 'Carousel', link: 'components/carousel/carousel.md' },
     { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
     { text: 'Progress', link: 'components/progress/progress.md' },
+    { text: 'Rating', link: 'components/rating/rating.md' },
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -55,7 +56,6 @@ function getComponents() {
 
     { 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: '- Table', link: 'components/table/table.md' },
     { text: '- Timeline', link: 'components/timeline/timeline.md' },

docs/components/rating/examples/RatingCountExample.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="vp-raw flex flex-col">
     <Rating
-    rating=1
-    scale=1
-    review-text="73 reviews"
-    review-link="#"
+      :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>

docs/components/rating/examples/RatingExample.vue

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

docs/components/rating/examples/RatingStarSizesExample.vue

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

docs/components/rating/examples/RatingWithTextExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Rating rating=4>
+    <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>

docs/components/rating/rating.md

@@ -13,7 +13,7 @@ Use this simple example of a star rating component for showing review results.
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating rating=4></Rating>
+    <Rating :rating="4" />
 </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'
 </script>
 <template>
-  <Rating rating=4>
+    <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>
@@ -43,16 +43,15 @@ Aggregate more results by using this example to show the amount of reviews and t
 import { Rating } from 'flowbite-vue'
 </script>
 <template>
-  <Rating
-    rating=1
-    scale=1
-    review-text="73 reviews"
-    review-link="#"
+    <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>
 ```
@@ -67,11 +66,11 @@ import { Rating } from 'flowbite-vue'
 </script>
 <template>
     <!-- Small -->
-    <Rating size="sm" rating=4 ></Rating>
+    <Rating size="sm" :rating="4" />
     <!-- Medium -->
-    <Rating size="md" rating=4></Rating>
+    <Rating size="md" :rating="4" />
     <!-- Large -->
-    <Rating size="lg" rating=4></Rating>
+    <Rating size="lg" :rating="4" />
 </template>
 ```