docs(QRating): small adjustments

Author: rstoenescu

docs/src/examples/QRating/HalfSelected.vue

@@ -1,24 +1,20 @@
 <template>
   <div class="q-pa-md">
     <div class="q-gutter-y-md column">
-      <div>Average rating:</div>
-
       <q-rating
-        :value="model"
-        @input="addRating"
+        v-model="model1"
         max="7"
-        size="3.5em"
+        size="3em"
         color="green-5"
         icon="star_border"
         icon-selected="star"
         icon-half="star_half"
       />
 
       <q-rating
-        :value="model"
-        @input="addRating"
+        v-model="model2"
         max="7"
-        size="3.5em"
+        size="3em"
         color="yellow"
         icon="star_border"
         icon-selected="star"
@@ -27,17 +23,25 @@
       />
 
       <q-rating
-        :value="model"
-        @input="addRating"
+        v-model="model3"
         max="7"
-        size="3.5em"
-        color="grey-4"
-        color-half="blue"
-        color-selected="green"
+        size="3em"
+        color="red"
+        color-selected="red-9"
         icon="favorite_border"
         icon-selected="favorite"
+        icon-half="favorite"
         no-dimming
       />
+
+      <div>
+        <q-btn
+          color="grey"
+          no-caps
+          label="Reset"
+          @click="resetModels"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -46,21 +50,17 @@
 export default {
   data () {
     return {
-      ratingModel: [ 3.5 ]
-    }
-  },
-
-  computed: {
-    model () {
-      return this.ratingModel.length === 0
-        ? 0
-        : this.ratingModel.reduce((acc, rating) => acc + rating, 0) / this.ratingModel.length
+      model1: 3.5,
+      model2: 2.3,
+      model3: 4.5
     }
   },
 
   methods: {
-    addRating (value) {
-      this.ratingModel.push(value)
+    resetModels () {
+      this.model1 = 3.5
+      this.model2 = 2.3
+      this.model3 = 4.5
     }
   }
 }

docs/src/examples/QRating/NoDimming.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="q-pa-md">
+    <q-rating
+      v-model="model"
+      max="5"
+      size="3.5em"
+      color="yellow"
+      icon="star_border"
+      icon-selected="star"
+      icon-half="star_half"
+      no-dimming
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: 2.3
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/rating.md

@@ -27,8 +27,6 @@ In the example below, when using the `icon-selected` prop, notice we can still u
 
 <doc-example title="Different icon for each rating" file="QRating/ArrayIcon" />
 
-<doc-example title="Different icon and color when half selected" file="QRating/HalfSelected" />
-
 ### Colors
 
 <q-badge label="v1.5.0+" />
@@ -37,6 +35,18 @@ When using the `color-selected` prop, notice we can still use `color` as well. T
 
 <doc-example title="Different color for each rating" file="QRating/Colors" />
 
+### Floating number
+
+<q-badge label="v1.7.4+" />
+
+<doc-example title="Different icon and color when half selected" file="QRating/HalfSelected" />
+
+### No dimming
+
+<q-badge label="v1.7.4+" />
+
+<doc-example title="No dimming" file="QRating/NoDimming" />
+
 ### Tooltips
 
 <q-badge label="v1.5.0+" />

ui/dev/src/pages/form/rating.vue

@@ -58,6 +58,17 @@
         <q-rating size="3rem" color="red-10" color-half="red-5" v-model="halfModel" :max="6" icon-selected="favorite" icon-half="favorite" icon="favorite_border" />
         <q-rating size="3rem" color="red" v-model="halfModel" :max="6" icon="img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" icon-half="star_half" />
         <q-rating size="3rem" color="red" v-model="halfModel" :max="6" icon="star_border" icon-selected="star" icon-half="star_half" />
+        <q-rating
+          v-model="halfModel"
+          max="7"
+          size="2em"
+          color="grey-4"
+          color-half="blue"
+          color-selected="green"
+          icon="favorite_border"
+          icon-selected="favorite"
+          no-dimming
+        />
       </div>
 
       <p class="caption q-mt-lg">

ui/src/components/rating/QRating.js

@@ -138,7 +138,7 @@ export default Vue.extend({
       const
         active = (this.mouseModel === 0 && this.value >= i) || (this.mouseModel > 0 && this.mouseModel >= i),
         half = halfIndex === i && this.mouseModel < i,
-        exSelected = this.mouseModel > 0 && ceil >= i && this.mouseModel < i,
+        exSelected = this.mouseModel > 0 && (half === true ? ceil : this.value) >= i && this.mouseModel < i,
         name = half === true
           ? (i <= icons.halfIconLen ? this.iconHalf[i - 1] : icons.halfIcon)
           : (

ui/src/components/rating/QRating.json

@@ -86,6 +86,7 @@
     "no-dimming": {
       "type": "Boolean",
       "desc": "Does not lower opacity for unselected icons",
+      "category": "style",
       "addedIn": "v1.7.4"
     },