48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<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" />
|