Review Components
A set of components for collecting and displaying user reviews for artists, organizers, venues, and other roles.
StarRating
A reusable star rating component that can be used for both input and display.
Interactive Example:
Selected Rating: 3
3/5
Read-only Example (with different sizes):
sm:
3.5/5
md:
4/5
lg:
5/5
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
| initialRating | Number | 0 | The initial rating value (1-5) |
| size | String | md | Size of stars ('sm', 'md', or 'lg') |
| readOnly | Boolean | false | If true, rating cannot be changed |
Events:
| Event | Payload | Description |
|---|---|---|
| update:rating | Number | Emitted when rating changes (1-5) |
ReviewForm
Form component for submitting or editing reviews.
Example:
Write a Review
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
| profileId | String | Required | ID of the profile being reviewed |
| profileType | String | Required | Type of profile ('organizer', 'venue', 'teacher', 'assistant') |
| initialRating | Number | 0 | Initial rating for edit mode |
| initialComment | String | '' | Initial comment for edit mode |
| isEdit | Boolean | false | Whether form is in edit mode |
Events:
| Event | Payload | Description |
|---|---|---|
| submitted | Object | Contains profileId, profileType, rating, and comment |
| cancelled | None | Emitted when form is cancelled |
ReviewCard
Card component for displaying a single review with edit/delete options.
Example:
A
Alice Johnson
February 5, 2024
3/5
Good teacher, but sometimes goes too fast for beginners.
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
| review | Object | Required | Review object containing id, userId, user, rating, comment, etc. |
Events:
| Event | Payload | Description |
|---|---|---|
| edit | Object | The review object to edit |
| delete | String | ID of the review to delete |
ReviewList
Component for displaying a list of reviews with management capabilities.
Example:
Reviews
Loading reviews...
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
| profileId | String | Required | ID of the profile whose reviews are being displayed |
| profileType | String | Required | Type of profile ('organizer', 'venue', 'teacher', 'assistant') |
ReviewStatistics
Component for displaying rating statistics.
Example:
Rating Summary
3
3/5
1 reviews
5
0
4
0
3
1
2
0
1
0
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
| reviews | Array | Required | Array of review objects |
Example Usage
Here's how you might use these components on a profile page:
<template>
<div>
<!-- Other profile information -->
<ReviewStatistics :reviews="profileReviews" />
<ReviewList
:profile-id="profileId"
:profile-type="profileType"
/>
</div>
</template>
<script setup>
const profileId = 'artist-123'
const profileType = 'teacher'
const profileReviews = [...] // Reviews fetched from API
</script>