PURating Component
A hand-drawn style rating component with interactive stars and smooth animations
Usage
Basic Usage
With Value Display
Different Sizes
Readonly Mode
Disabled State
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | number | No | 0 | Current rating value |
| maxStars | number | No | 5 | Maximum number of stars |
| size | small | medium | large | No | medium | Star size |
| readonly | boolean | No | false | Read-only mode |
| disabled | boolean | No | false | Disabled state |
| showValue | boolean | No | false | Show rating value |
| customClass | string | No | '' | Custom CSS classes |
Events
| Event | Payload | Description |
|---|---|---|
| update:modelValue | number | Emitted when rating changes |
| change | number | Emitted when star is clicked |
Features
- Hand-drawn style stars with organic shadows
- Interactive hover effects and smooth animations
- Multiple sizes for different use cases
- Readonly and disabled states
- Optional value display
- Dark mode support
- Responsive design
- Accessible keyboard navigation
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API