Rate

Enterprise-level rating component based on BrConfigProvider for global theme configuration. It supports half stars, custom icons, read-only state, and seamless integration with BrFormItem.

Component Features

⭐ Half-Star Support: Supports allow-half prop for half-star precision.
🔢 Custom Count: Configurable star count via count prop.
🖼️ Custom Icons: Supports custom icons via character slot.
🌈 Segmented Colors: Supports segmented color for different rating ranges.
📝 Helper Text: Supports helper text display.
❌ Clearable: Supports allow-clear prop to clear the rating.
📝 Form Integration: Supports seamless integration with BrFormItem and vee-validate.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

The most basic usage of the Rate component.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRate } from '@breezeui/vue'

const value = ref(3)
</script>

<template>
  <BrRate v-model="value" />
</template>

Half Star

Supports half-star ratings, enabled via the allow-half attribute.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRate } from '@breezeui/vue'

const value = ref(2.5)
</script>

<template>
  <BrRate v-model="value" allow-half />
</template>

Custom Icon and Count

You can customize the icons and the maximum rating count.

<script setup lang="ts">
import { ref } from 'vue'
import { BrRate } from '@breezeui/vue'
import { Heart } from 'lucide-vue-next'

const value = ref(4)
</script>

<template>
  <BrRate 
    v-model="value" 
    :count="10" 
    :icon="Heart" 
    :void-icon="Heart" 
    color="#ef4444" 
  />
</template>

Readonly and Disabled

<script setup lang="ts">
import { ref } from 'vue'
import { BrRate, BrStack } from '@breezeui/vue'

const value1 = ref(4)
const value2 = ref(3)
</script>

<template>
  <BrStack gap="4">
    <div>
      <div class="mb-2 text-sm text-muted-foreground">Read-only State (Readonly)</div>
      <BrRate v-model="value1" readonly />
    </div>
    <div>
      <div class="mb-2 text-sm text-muted-foreground">Disabled State (Disabled)</div>
      <BrRate v-model="value2" disabled />
    </div>
  </BrStack>
</template>

Theme Customization

BrRate seamlessly integrates with BrFormItem and supports global theme configuration via BrConfigProvider.

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrForm, 
  BrFormItem, 
  BrFormLabel, 
  BrFormControl, 
  BrRate, 
  BrConfigProvider,
  BrButton
} from '@breezeui/vue'

const rating = ref(0)
const customTheme = ref(false)

const themeConfig = {
  primary: '#10b981', // Green Theme
}
</script>

<template>
  <div>
    <BrButton class="mb-6" @click="customTheme = !customTheme">
      Toggle Green Theme ({{ customTheme ? 'On' : 'Off' }})
    </BrButton>

    <BrConfigProvider :theme="customTheme ? themeConfig : undefined">
      <BrForm>
        <BrFormItem name="rating" :rules="[(v) => v > 0 || 'Please give a rating']">
          <BrFormLabel>Service Rating</BrFormLabel>
          <BrFormControl>
            <BrRate v-model="rating" allow-half show-text :texts="['Terrible', 'Disappointed', 'Average', 'Satisfied', 'Excellent']" />
          </BrFormControl>
        </BrFormItem>
      </BrForm>
    </BrConfigProvider>
  </div>
</template>

API

BrRate Props

Name	Type	Default	Description
modelValue / v-model	`number`	`0`	Current rating value
count	`number`	`5`	Total number of icons
allowHalf	`boolean`	`false`	Whether to allow half-star ratings
readonly	`boolean`	`false`	Whether the component is readonly
disabled	`boolean`	`false`	Whether the component is disabled
clearable	`boolean`	`false`	Whether to allow clearing when clicked again
size	`ComponentSize \| number`	`'default'`	Size of the rating icons
color	`string \| string[] \| Record<number, string>`	-	Color when active, supports an array of colors or a piecewise color object
voidColor	`string`	-	Color when unselected
icon	`Component \| string`	`Star`	Icon component when active
voidIcon	`Component \| string`	`Star`	Icon component when unselected
halfIcon	`Component \| string`	-	Icon component for half star (if not provided, it is implemented by clipping `icon`)
showText	`boolean`	`false`	Whether to show auxiliary text
texts	`string[]`	`[]`	Array of auxiliary texts
validationState	`'default' \| 'success' \| 'error' \| 'warning'`	`'default'`	Validation state, automatically synced when integrated with `BrFormItem`

BrRate Emits

Name	Description	Callback Parameters
update:modelValue	Triggered when the rating value changes	`(value: number)`
change	Triggered when the rating value changes	`(value: number)`
hoverChange	Triggered when the hover rating value changes	`(value: number)`

BrRateItem Props (Internal Item Component)

Usually not used directly, exposed for deep customization.

Name	Type	Description
value	`number`	Value of the current item
activeValue	`number`	Total active value
hoverValue	`number`	Total hover value
allowHalf	`boolean`	Whether half stars are allowed
readonly	`boolean`	Whether it is readonly
disabled	`boolean`	Whether it is disabled
size	`ComponentSize \| number`	Icon size
color	`string`	Active color
voidColor	`string`	Unselected color
icon	`Component \| string`	Active icon
voidIcon	`Component \| string`	Unselected icon
halfIcon	`Component \| string`	Half-star icon

#Rate

#Component Features

#Half Star

#Custom Icon and Count

#Readonly and Disabled

#Theme Customization

#API

#BrRate Props

#BrRate Emits

#BrRateItem Props (Internal Item Component)