@empathyco/x-components
Version:
Empathy X Components
185 lines (143 loc) • 4.5 kB
Markdown
---
title: BaseResultRating
---
# BaseResultRating
This component renders a BaseRating for a result passed as prop.
## Props
| Name | Description | Type | Default |
| ------------------- | --------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | The @empathyco/x-types#Result to render its rating. | <code>Result</code> | <code></code> |
| <code>link</code> | A link to redirect when rating is clicked. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ------------------------ | ------------------------------------ | ----------------------------------------- |
| <code>default</code> | To override the whole content | <br /> |
| <code>empty-icon</code> | The content to render as empty icon | None |
| <code>filled-icon</code> | The content to render as filled icon | None |
## Events
This component emits the following events:
- [`UserClickedAResultRating`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
## Examples
### Basic example
```vue
<template>
<BaseResultRating :result="result" />
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```
### Play with props
#### Custom max value
In this example, the result rating has been configured to 6 as maximum value using the prop `max`.
```vue
<template>
<BaseResultRating :result="result" :max="6" />
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```
#### With link
In this example, the result rating has been configured with a link to redirect when is clicked.
```vue
<template>
<BaseResultRating :result="result" link="https://empathy.co/" />
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```
### Play with events
In this example, a message has been added to be shown when the result rating is clicked.
```vue
<template>
<BaseResultRating
:result="result"
@UserClickedAResultRating="logUserClickedRating"
/>
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
function logUserClickedRating(result) {
console.log("User clickedRating of this result:", result);
}
</script>
```
## Extending the component
### Custom icons with slots
The rendered icons for rating can be configured through slots. Keep in mind that the icons for both
states (filled and empty), must have the same size make component work properly.
```vue
<template>
<BaseResultRating :result="result">
<template #filled-icon>❤️</template>
<template #empty-icon>🤍</template>
</BaseResultRating>
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```
### Override all content
It is possible to override all the content of the component to show your own rating but keeping the
link and event behaviour:
```vue
<template>
<BaseResultRating :result="result" #default="{ rating, result }">
<span v-for="star in rating" :key="star">⭐️</span>
<span>{{ result.name }}</span>
</BaseResultRating>
</template>
<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```
### Reuse BaseRating
It is also possible to reuse our rating component:
```vue
<template>
<BaseResultRating :result="result" #default="{ rating, result }">
<BaseRating :value="rating" />
<span>{{ result.name }}</span>
</BaseResultRating>
</template>
<script setup>
import { BaseResultRating, BaseRating } from "@empathyco/x-components";
const result = {
id: 1,
name: "Result with rating",
rating: { value: 3 },
};
</script>
```