Start your content search
2 min read

BaseResultRating

BaseResultRating

This component renders a BaseRating for a result passed as prop.

Props

Name Description Type Default
result The @empathyco/x-types#Result to render its rating. Result
link A link to redirect when rating is clicked. string

Slots

Name Description Bindings
(name - type - description)
default To override the whole content
empty-icon The content to render as empty icon None
filled-icon The content to render as filled icon None

Events

This component emits the following events:

Examples

Basic example

<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.

<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>

In this example, the result rating has been configured with a link to redirect when is clicked.

<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.

<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.

<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:

<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:

<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>
Cookie-Less