quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
124 lines (118 loc) • 3.15 kB
JavaScript
import { getEventKey, stopAndPrevent } from '../../utils/event.js'
import { between } from '../../utils/format.js'
import QIcon from '../icon/QIcon.js'
export default {
name: 'QRating',
props: {
value: Number,
max: {
type: Number,
default: 5
},
icon: String,
color: String,
size: String,
readonly: Boolean,
disable: Boolean
},
data () {
return {
mouseModel: 0
}
},
computed: {
model: {
get () {
return this.value
},
set (value) {
this.$emit('input', value)
this.$nextTick(() => {
if (JSON.stringify(value) !== JSON.stringify(this.value)) {
this.$emit('change', value)
}
})
}
},
editable () {
return !this.readonly && !this.disable
},
classes () {
const cls = []
this.disable && cls.push('disabled')
this.editable && cls.push('editable')
this.color && cls.push(`text-${this.color}`)
return cls
}
},
methods: {
set (value) {
if (this.editable) {
const model = between(parseInt(value, 10), 1, this.max)
this.model = this.model === model ? 0 : model
this.mouseModel = 0
}
},
__setHoverValue (value) {
if (this.editable) {
this.mouseModel = value
}
}
},
render (h) {
const
child = [],
tabindex = this.editable ? 0 : -1
for (let i = 1; i <= this.max; i++) {
child.push(h('span', {
key: i,
ref: `rt${i}`,
attrs: { tabindex },
on: {
keydown: e => {
switch (getEventKey(e)) {
case 13:
case 32:
this.set(i)
return stopAndPrevent(e)
case 37: // LEFT ARROW
case 40: // DOWN ARROW
if (this.$refs[`rt${i - 1}`]) {
this.$refs[`rt${i - 1}`].focus()
}
return stopAndPrevent(e)
case 39: // RIGHT ARROW
case 38: // UP ARROW
if (this.$refs[`rt${i + 1}`]) {
this.$refs[`rt${i + 1}`].focus()
}
return stopAndPrevent(e)
}
}
}
}, [
h(QIcon, {
props: { name: this.icon || this.$q.icon.rating.icon },
'class': {
active: (!this.mouseModel && this.model >= i) || (this.mouseModel && this.mouseModel >= i),
exselected: this.mouseModel && this.model >= i && this.mouseModel < i,
hovered: this.mouseModel === i
},
attrs: { tabindex: -1 },
nativeOn: {
click: () => this.set(i),
mouseover: () => this.__setHoverValue(i),
mouseout: () => { this.mouseModel = 0 },
focus: () => this.__setHoverValue(i),
blur: () => { this.mouseModel = 0 }
}
})
]))
}
return h('div', {
staticClass: 'q-rating row inline items-center',
'class': this.classes,
style: this.size ? `font-size: ${this.size}` : ''
}, child)
}
}