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:

• UserClickedAResultRating (opens new window)

See it in action

Here you have a basic example of how the result rating is rendered.

<template>
  <BaseResultRating :result="result" />
</template>
<script>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        result: {
          id: 1,
          name: 'Result with rating',
          rating: { value: 3 }
        }
      };
    }
  };
</script>

Play with props

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>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        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>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        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>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        result: {
          id: 1,
          name: 'Result with rating',
          rating: { value: 3 }
        }
      };
    },
    methods: {
      logUserClickedRating(result) {
        console.log('User clickedRating of this result:', result);
      }
    }
  };
</script>

Extending the component

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>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        result: {
          id: 1,
          name: 'Result with rating',
          rating: { value: 3 }
        }
      };
    }
  };
</script>

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">⭐️</span>
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>
<script>
  import { BaseResultRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating
    },
    data() {
      return {
        result: {
          id: 1,
          name: 'Result with rating',
          rating: { value: 3 }
        }
      };
    }
  };
</script>

Even it is possible to reuse our rating component:

<template>
  <BaseResultRating :result="result" #default="{ rating, result }">
    <BaseRating :value="rating" />
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>
<script>
  import { BaseResultRating, BaseRating } from '@empathyco/x-components';
  export default {
    name: 'ResultRatingDemo',
    components: {
      BaseResultRating,
      BaseRating
    },
    data() {
      return {
        result: {
          id: 1,
          name: 'Result with rating',
          rating: { value: 3 }
        }
      };
    }
  };
</script>