0.0.12 update

README.md

@@ -73,7 +73,7 @@ The following props can be passed to customize the appearance and behavior of th
 The component emits the following events:
 
 - `ratingSelected`: Triggered when a rating level is selected. The event payload is the selected rating value.
-- `hoverRating`: Triggered when the mouse hovers over the rating meter. The event payload is the mouse event object.
+- `ratingHovered`: Triggered when the mouse hovers over the rating meter. The event payload is the selected rating value.
 
 <!-- Badges -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-rating",
-  "version": "0.0.1",
+  "version": "0.0.12",
   "description": "Display or retrieve a score on a fully customisable scale.",
   "homepage": "https://github.com/Aurion72/nuxt-rating#readme",
   "repository": "Aurion72/nuxt-rating",

src/runtime/components/NuxtRating.vue

@@ -31,7 +31,7 @@ type Props = {
 
 const emit = defineEmits<{
   ratingSelected: [rate: number];
-  hoverRating: [event: MouseEvent];
+  ratingHovered: [event: number];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
@@ -63,7 +63,7 @@ const cssVars = computed(() => ({
 
 const handleMouseMove = (event: MouseEvent) => {
   if (props.readOnly) return;
-  emit("hoverRating", event);
+  emit("ratingHovered", calculateRating(event));
   hoveredRating.value = calculateRating(event);
 };
 
@@ -95,14 +95,15 @@ function calculateRating(event: MouseEvent): number {
   width: auto;
   display: inline-block;
   vertical-align: baseline;
+  height: 0px;
   font-size: var(--rating-size);
   cursor: var(--cursor-type);
 }
 
 .average-rating::before {
   --percent: calc(var(--rating-value) / var(--rating-count) * 100%);
   content: var(--rating-content);
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
   color: rgba(0, 0, 0, 0.2);