BasePriceFilterLabel

Renders a label for a price filter, allowing to select different messages depending on the value of the filter.

Props

Name	Description	Type	Default
filter	The filter data for get min and max value.	{ range: RangeValue }
format	Configuration for show the label.	string
lessThan	Message shown when the filter hasn't got the min value defined.	string
fromTo	Message shown when the filter has both the min and max values defined.	string
from	Message shown when the filter hasn't got max value defined.	string

Example

Renders a label for a price filter, allowing to select different messages depending on the value of the filter.

• When the min value property isn't defined in the filter, you can show a message like Less than $10 by using the lessThan prop, combined with the {max} placeholder.
• When the max value property isn't defined in the filter, you can show a message like More than $300 by using the from prop, combined with the {min} placeholder.
• If both the min and max values of the filter are defined, you can show a message like $10 - $300 by using the fromTo prop.

This component uses internally the BaseCurrency one, so you can pass the same props to configure how the price should look like.

Basic usage

<template>
  <Facets>
    <template #price="{ facet }">
      <Filters v-slot="{ filter }" :filters="facet.filters">
        <NumberRangeFilter :filter="filter" v-slot="{ filter }">
          <BasePriceFilterLabel
            :filter="filter"
            format="$i"
            lessThan="Less than {max}"
            fromTo="From {min} to {max}"
            from="More than {min}"
          />
        </NumberRangeFilter>
      </Filters>
    </template>
  </Facets>
</template>
<script>
import { BasePriceFilterLabel } from '@empathyco/x-components'
import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'
export default {
  name: 'MyFacets',
  components: {
    Facets,
    Filters,
    NumberRangeFilter,
    BasePriceFilterLabel,
  },
}
</script>