SortPickerList

The SortPickerList component allows user to select the search results order. This component also allows to change the selected sort programmatically.

Props

Name	Description	Type	Default
items	The list of possible sort values. If there are no values selected, the first item of this list will be selected.	Array
animation	The transition to use for rendering the list.	union	'div'

Slots

Name	Description	Bindings (name - type - description)
default

Sort Picker List

The SortPickerList component can be used to change the way the search results are ordered.

To do so, the list of valid sort values has to be provided using the items prop. These are the values that can then be received in the SearchAdapter.

The component also optionally accepts the selected sort, which can be set using the value prop. This prop allows changing programmatically the selected sort, as it will be synced with the store immediately. If this prop is not provided, the first item from the items prop will be the one selected by default.

This component also allows customizing each one of the possible sort values. This can be done with the default slot.

Events

This component emits 2 different events:

• SelectedSortProvided (opens new window): To sync the selected sort with the store state value. This event is emitted as soon as the list of items is received, whenever this list changes if there is no provided value, and when the provided value changes.
• UserClickedASort (opens new window): As its name suggest, the event is emitted after the user clicks one of the sort options. This does not mean that the sort has changed, only that the user has clicked it.

Examples

Only providing the list of items

<template>
  <SortPickerList :items="sortValues">
    <template #item="{ item, isSelected }">Item: {{ item }}</template>
  </SortPickerList>
</template>
<script>
  import { SortPickerList } from '@empathyco/x-components/search';
  export default {
    components: {
      SortPickerList
    },
    data() {
      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };
    }
  };
</script>

Providing also the selected value

<template>
  <SortPickerList v-model="selectedSort" :items="sortValues">
    <template #item="{ item, isSelected }">
      <span v-if="isSelected">✅</span>
      {{ item }}
    </template>
  </SortPickerList>
</template>
<script>
  import { SortPickerList } from '@empathyco/x-components/search';
  export default {
    components: {
      SortPickerList
    },
    data() {
      return {
        selectedSort: 'Price asc',
        sortValues: ['Relevance', 'Price asc', 'Price desc']
      };
    }
  };
</script>

Customizing the items with classes

The buttonClass prop can be used to add classes to the sort items.

<template>
  <SortPickerList :items="sortValues" buttonClass="x-button-outlined" />
</template>
<script>
  import { SortPickerList } from '@empathyco/x-components/search';
  export default {
    components: {
      SortPickerList
    },
    data() {
      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };
    }
  };
</script>