mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-03-03 06:29:42 +00:00
55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex items-center" :class="{ 'cursor-pointer': !readonly }">
|
|
<div v-for="n in 5" :key="n" class="relative px-0.5" @mouseenter="hoverStar(n)" @mouseleave="hoverStar(0)" @click="setRating(n)">
|
|
<span class="material-symbols text-yellow-400" :style="{ fontSize: size + 'px' }" :class="{ fill: n <= displayRating }">star</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 24
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
hoverRating: 0
|
|
}
|
|
},
|
|
computed: {
|
|
displayRating() {
|
|
return this.hoverRating || this.value
|
|
}
|
|
},
|
|
methods: {
|
|
hoverStar(n) {
|
|
if (this.readonly) return
|
|
this.hoverRating = n
|
|
},
|
|
setRating(n) {
|
|
if (this.readonly) return
|
|
this.$emit('input', n)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.material-symbols {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.material-symbols.fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|