Skip to content

feat(VRating): expose activeColor in item slot props#22814

Open
Mo7ammedXD wants to merge 2 commits into
vuetifyjs:devfrom
Mo7ammedXD:feat/22273-vrating-active-color-slot
Open

feat(VRating): expose activeColor in item slot props#22814
Mo7ammedXD wants to merge 2 commits into
vuetifyjs:devfrom
Mo7ammedXD:feat/22273-vrating-active-color-slot

Conversation

@Mo7ammedXD
Copy link
Copy Markdown

Description

Exposes activeColor in the #item slot props for VRating. The value is already
computed internally (props.activeColor ?? props.color) but was not passed through to
the slot, making it unavailable to consumers who customize the item rendering.

resolves #22273

Changes

  • Added activeColor to VRatingItemSlot type definition
  • Included activeColor in the itemState computed return value
  • Added 3 tests covering: explicit activeColor, fallback to color, and undefined state

Markup:

<template>                                                                           
  <v-app>
    <v-container>
      <h3>activeColor exposed in slot</h3>
      <v-rating v-model="rating" active-color="blue" color="grey">                     
        <template #item="{ activeColor, color, isFilled, icon }">
          <v-icon :color="isFilled ? activeColor : color" size="large">                
            {{ icon }}                                                                 
          </v-icon>                                                                  
        </template>                                                                    
      </v-rating>                                         
                                                                                     
      <h3 class="mt-4">Fallback: no activeColor prop</h3>
      <v-rating v-model="rating" color="red">
        <template #item="{ activeColor, isFilled, icon }">                             
          <v-icon :color="isFilled ? activeColor : 'grey'" size="large">
            {{ icon }}                                                                 
          </v-icon>                                       
        </template>                                                                  
      </v-rating>                                                                      
 
      <h3 class="mt-4">No regression: default (no slot)</h3>                           
      <v-rating v-model="rating" active-color="purple" color="grey-lighten-1" />
    </v-container>                                                                   
  </v-app>                                                                             
</template>
                                                                                       
<script setup>                                            
  import { ref } from 'vue'                                                          
  const rating = ref(3)
</script>

Mo7ammedXD and others added 2 commits April 23, 2026 16:47
@J-Sek J-Sek linked an issue May 8, 2026 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add activeColor to #item slot props for VRating

1 participant