- Implementazione TRASPORTI ! Passo 1

src/modules/trasporti/components/ride/StarRating.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="[
+      'star-rating',
+      { 'star-rating--readonly': readonly },
+      { 'star-rating--large': size === 'large' },
+      { 'star-rating--small': size === 'small' }
+    ]"
+  >
+    <div class="star-rating__stars">
+      <button
+        v-for="star in 5"
+        :key="star"
+        type="button"
+        :class="[
+          'star-rating__star',
+          { 'star-rating__star--filled': star <= displayValue },
+          { 'star-rating__star--half': star === Math.ceil(displayValue) && displayValue % 1 !== 0 },
+          { 'star-rating__star--hovered': !readonly && star <= hoverValue }
+        ]"
+        :disabled="readonly"
+        @click="setValue(star)"
+        @mouseenter="setHover(star)"
+        @mouseleave="clearHover"
+      >
+        <q-icon
+          :name="getStarIcon(star)"
+          :color="getStarColor(star)"
+          :size="starSize"
+        />
+      </button>
+    </div>
+
+    <!-- Label valore -->
+    <span v-if="showLabel" class="star-rating__label">
+      {{ displayLabel }}
+    </span>
+
+    <!-- Valore numerico -->
+    <span v-if="showValue" class="star-rating__value">
+      {{ displayValue.toFixed(1) }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" src="./StarRating.ts" />
+<style lang="scss" src="./StarRating.scss" />