fix(VRating): expose model value in item slot

vuetifyjs · Feb 23, 2023 · 62b4be7 · 62b4be7
1 parent 70c19a8
commit 62b4be7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx
@@ -29,6 +29,7 @@ type VRatingItemSlot = {
   icon: IconValue
   color?: string
   props: Record<string, unknown>
+  rating: number
 }
 
 type VRatingItemLabelSlot = {
@@ -188,6 +189,7 @@ export const VRating = genericComponent<VRatingSlots>()({
             onMouseup={ onMouseup }
             onMouseenter={ onMouseenter }
             onMouseleave={ onMouseleave }
+            onClick={ onClick }
           >
             <span class="v-rating__hidden">{ t(props.itemAriaLabel, value, props.length) }</span>
             {
@@ -197,6 +199,7 @@ export const VRating = genericComponent<VRatingSlots>()({
                 props: btnProps,
                 value,
                 index,
+                rating: normalizedValue.value,
               })
               : (
                 <VBtn { ...btnProps } />
@@ -211,7 +214,6 @@ export const VRating = genericComponent<VRatingSlots>()({
             type="radio"
             value={ value }
             checked={ normalizedValue.value === value }
-            onClick={ onClick }
             onFocus={ onFocus }
             onBlur={ onBlur }
             ref={ index === 0 ? firstRef : undefined }

diff --git a/packages/vuetify/src/components/VRating/__tests__/VRating.spec.cy.tsx b/packages/vuetify/src/components/VRating/__tests__/VRating.spec.cy.tsx
@@ -1,5 +1,6 @@
 /// <reference types="../../../../types/cypress" />
 
+import { VBtn } from '@/components/VBtn'
 import { Application } from '../../../../cypress/templates'
 import { VRating } from '../VRating'
 
@@ -148,4 +149,23 @@ describe('VRating', () => {
 
     cy.emitted('.v-rating', 'update:modelValue').should('deep.equal', [[3.5]])
   })
+
+  it('should work with item slot', () => {
+    cy.mount(() => (
+      <Application>
+        <VRating>
+          {{
+            item: ({ value, rating }) => (
+              <VBtn variant="tonal" class="mx-1" color={rating === value ? 'primary' : undefined}>{ value }</VBtn>
+            ),
+          }}
+        </VRating>
+      </Application>
+    ))
+
+    cy.get('.v-btn')
+      .eq(2)
+      .click()
+      .should('have.class', 'text-primary')
+  })
 })