docs(VRating): add color example

closes #17246

packages/api-generator/src/locale/en/VRating.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "ariaLabel": "The **aria-label** used for each item.",
-    "backgroundColor": "The color used for empty items.",
     "clearable": "Allows for the component to be cleared by clicking on the current value.",
     "emptyIcon": "The icon displayed when empty.",
     "fullIcon": "The icon displayed when full.",

packages/docs/src/examples/v-rating/prop-color.vue

@@ -2,8 +2,8 @@
   <div class="text-center">
     <v-rating
       v-model="rating"
-      bg-color="orange-lighten-1"
-      color="blue"
+      color="orange-lighten-1"
+      active-color="blue"
     ></v-rating>
   </div>
 </template>

packages/docs/src/examples/v-rating/usage.vue

@@ -1,80 +1,79 @@
 <template>
-  <div class="text-center">
-    <v-rating
-      v-bind="$attrs"
-    ></v-rating>
-  </div>
+  <usage-example
+    v-model="selectedOption"
+    :code="code"
+    :name="name"
+    :options="['Hearts']"
+  >
+    <div class="text-center">
+      <v-rating v-bind="props"></v-rating>
+    </div>
+
+    <template v-slot:configuration>
+      <v-checkbox v-model="options['half-increments']" label="Half increments"></v-checkbox>
+      <v-checkbox v-model="options.hover" label="Hover"></v-checkbox>
+      <v-checkbox v-model="options.readonly" label="Readonly"></v-checkbox>
+
+      <br>
+
+      <v-slider v-model="options.length" :min="1" :max="8" label="Length"></v-slider>
+      <v-slider v-model="options.size" :min="16" :max="128" label="Size"></v-slider>
+      <v-slider v-model="options['model-value']" :min="0" :max="options.length" :step="options['half-increments'] ? 0.5 : 1" label="Value"></v-slider>
+
+      <br>
+
+      <v-select v-model="options.color" :items="colorOptions" label="Color"></v-select>
+      <v-select v-model="options['active-color']" :items="colorOptions" label="Active color"></v-select>
+    </template>
+  </usage-example>
 </template>
 
-<script>
-  export default {
-    name: 'Usage',
+<script setup>
+  // Utilities
+  import { computed, reactive, ref } from 'vue'
+  import { propsToString } from '@/util/helpers'
+
+  const selectedOption = ref()
+
+  const options = reactive({
+    'half-increments': false,
+    hover: true,
+    readonly: false,
+
+    length: 5,
+    size: 32,
+    'model-value': 3,
+
+    color: null,
+    'active-color': 'primary',
+  })
+
+  const name = 'v-rating'
+  const props = computed(() => {
+    return Object.fromEntries(
+      Object.entries({
+        ...options,
+        ...(selectedOption.value === 'Hearts' ? {
+          'empty-icon': 'mdi-heart-outline',
+          'half-icon': 'mdi-heart-half-full',
+          'full-icon': 'mdi-heart',
+        } : undefined),
+      }).filter(([key, value]) => value)
+    )
+  })
 
-    inheritAttrs: false,
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)} />`
+  })
 
-    data: () => ({
-      show: true,
-      defaults: {
-        'background-color': null,
-        dense: false,
-        color: null,
-        'empty-icon': '$mdiStarOutline',
-        'full-icon': '$mdiStar',
-        'half-icon': '$mdiStarHalfFull',
-        'half-increments': false,
-        length: 5,
-        hover: true,
-        readonly: false,
-        value: 3,
-        size: 64,
-      },
-      options: {
-        booleans: [
-          'half-increments',
-          'hover',
-          'readonly',
-        ],
-        selects: {
-          color: [
-            'primary',
-            'warning',
-            'green',
-            'red',
-            'blue',
-            'error',
-            'teal',
-            'red lighten-3',
-          ],
-          'background-color': [
-            'grey lighten-2',
-            'warning lighten-1',
-            'green lighten-2',
-            'red lighten-2',
-            'grey',
-            '#eee',
-            'cyan lighten-2',
-            'grey lighten-1',
-          ],
-          'empty-icon': [
-            '$mdiHeartOutline',
-            '$mdiStarOutline',
-          ],
-          'full-icon': [
-            '$mdiHeart',
-            '$mdiStar',
-          ],
-          'half-icon': [
-            '$mdiHeartHalfFull',
-            '$mdiStarHalfFull',
-          ],
-        },
-        sliders: {
-          length: [1, 15],
-          size: [0, 100],
-          value: [0, 15, 0.5],
-        },
-      },
-      tabs: ['dense'],
-    }),
-  }
+  const colorOptions = [
+    'primary',
+    'warning',
+    'green',
+    'red',
+    'blue',
+    'error',
+    'teal',
+    'red-lighten-3',
+  ]
 </script>

packages/docs/src/pages/en/components/ratings.md

@@ -24,7 +24,7 @@ The `v-rating` component is a specialized but important piece in building user w
 
 The `v-rating` component provides a simple interface for gathering user feedback.
 
-<!-- <usage name="v-rating" /> -->
+<usage name="v-rating" />
 
 <entry />
 

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -196,6 +196,11 @@ app.use(vuetify)
 - `v-subheader`  has been renamed to `v-list-subheader`.
 - `v-list-item`'s `active` scoped slot prop has been renamed to `isActive`
 
+### v-rating
+
+- `color` has been renamed to `active-color`.
+- `background-color` has been renamed to `color`.
+
 ### v-select/v-combobox/v-autocomplete
 
 - v-model values not present in `items` will now be rendered instead of being ignored.