village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RatingInput Fix (#179)

This commit is contained in:
formsdev 2023-08-28 16:47:22 +05:30 committed by GitHub
parent efe791def7
commit 29b153bd76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/components/forms/RatingInput.vue
View File

@ -12,11 +12,11 @@
<div class="stars-outer"> <div class="stars-outer">
<div v-for="i in numberOfStars" :key="i" <div v-for="i in numberOfStars" :key="i"
class="cursor-pointer inline-block" class="cursor-pointer inline-block text-gray-200 dark:text-gray-800"
:class="{'text-yellow-400':i<=compVal, 'text-yellow-100 dark:text-yellow-900':i>compVal && i<=hoverRating ,'text-gray-200 dark:text-gray-800':i>compVal && i>hoverRating, '!cursor-not-allowed':disabled}" :class="{'!text-yellow-400 active-star':i<=compVal, '!text-yellow-200 !dark:text-yellow-800 hover-star':i>compVal && i<=hoverRating, '!cursor-not-allowed':disabled}"
role="button" @click="setRating(i)" role="button" @click="setRating(i)"
@mouseover="hoverRating = (disabled) ? null : i" @mouseenter="onMouseHover(i)"
@mouseleave="hoverRating = null" @mouseleave="hoverRating = -1"
> >
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path <path
@ -47,19 +47,26 @@ export default {
data () { data () {
return { return {
hoverRating: null hoverRating: -1
} }
}, },
mounted () {
if (!this.compVal) this.compVal = 0
},
updated () { updated () {
if (this.compVal === null) { if (!this.compVal) {
this.compVal = 0 this.compVal = 0
} }
}, },
methods: { methods: {
onMouseHover (i) {
this.hoverRating = (this.disabled) ? -1 : i
},
setRating (val) { setRating (val) {
if(this.disabled){ if (this.disabled) {
return return
} }
if (this.compVal === val) { if (this.compVal === val) {