BaseRatingFilterLabel

Renders a label for a rating filter, allowing to override the elements used to paint the rating.

Props

Name	Description	Type	Default
filter	The filter data to render.	BooleanFilter
max	Maximum number of elements to paint.	number	5

Slots

Name	Description	Bindings (name - type - description)
rating-icon-filled	Filled icon content	None
rating-icon-empty	Empty icon content	None

Example

Renders a label for a rating filter, allowing to override the elements used to paint the rating. The filter label must be a valid number string. For example: '3', '2.5', '0.25'

Basic usage

<template>
  <BaseRatingFilterLabel :filter="filter" />
</template>
<script setup>
import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
import { ref } from 'vue'
const filter = ref({
  label: '3',
  selected: false,
  id: 'rating-3',
  modelName: 'BooleanFilter',
})
</script>

Customizing color

It is possible to change the default color directly with the color CSS attribute. For more elaborate styles, you can style the inner svg icons.

<template>
  <BaseRatingFilterLabel :filter="filter" style="color: gold" />
</template>
<script setup>
import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
import { ref } from 'vue'
const filter = ref({
  label: '4.5',
  selected: false,
  id: 'rating-4.5',
  modelName: 'BooleanFilter',
})
</script>

Customizing its contents

The max prop can be used to set the max rating number. It will render as many icons as this max value.

<template>
  <BaseRatingFilterLabel :filter="filter" :max="max" />
</template>
<script setup>
import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
import { ref } from 'vue'
const filter = ref({
  label: '2.5',
  selected: false,
  id: 'rating-2.5',
  modelName: 'BooleanFilter',
})
const max = 7
</script>

The default icons can be changed using the rating-icon-filled and rating-icon-empty slots, to represent the filled and empty icons in the rating component.

<template>
  <BaseRatingFilterLabel :filter="filter" :max="max">
    <template #rating-icon-filled>♥</template>
    <template #rating-icon-empty>♡</template>
  </BaseRatingFilterLabel>
</template>
<script setup>
import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
import { ref } from 'vue'
const filter = ref({
  label: '5',
  selected: false,
  id: 'rating-5',
  modelName: 'BooleanFilter',
})
const max = 5
</script>