quasar-framework/src/components/rating/QRating.js

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

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)
  }
}