@empathyco/x-components
Version:
Empathy X Components
188 lines (158 loc) • 6.53 kB
Markdown
---
title: BaseSuggestions
---
# BaseSuggestions
Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
in the default slot for working.
## Props
| Name | Description | Type | Default |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
| <code>suggestions</code> | The list of suggestions to render. | <code>Suggestion[]</code> | <code></code> |
| <code>animation</code> | Animation component that will be used to animate the suggestion. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Number of suggestions to be rendered. | <code>number</code> | <code></code> |
| <code>showFacets</code> | Boolean value to indicate if the facets should be rendered. | <code>boolean</code> | <code>false</code> |
| <code>showPlainSuggestion</code> | When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without<br />filter should be rendered. | <code>boolean</code> | <code>false</code> |
| <code>suggestionItemClass</code> | Class inherited by content element. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | (Required) List item content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**index** <code>number</code> - Suggestion index<br />**filter** <code>Filter \| undefined</code> - Suggestion's filter |
## Examples
For this component to work, you will need to set a list of suggestions as prop, and also to
implement the component for single suggestion, which handles the click event. In the following
example, the suggestions are retrieved from a property called `suggestions`, and the implementation
of the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method
when clicked.
```vue
<BaseSuggestions :suggestions="suggestions">
<template #default="{ suggestion }">
<button @click="emitSuggestionSelected($event, suggestion)">
{{ suggestion.query }}
</button>
</template>
</BaseSuggestions>
```
Following the previous example, the component options object could be something like this:
```js
export default {
computed: {
...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),
},
methods: {
emitSuggestionSelected(event, suggestion) {
this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })
this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })
},
},
}
```
### Play with props
In this example, the suggestions has been limited to render a maximum of 3 items. _Type "puzzle" or
another toy in the input field to try it out!_
```vue
<template>
<BaseSuggestions :suggestions="suggestions" :maxItemsToRender="3" />
</template>
<script>
import { BaseSuggestions } from '@empathyco/x-components'
export default {
name: 'BaseSuggestionsDemo',
components: {
BaseSuggestions,
},
data() {
return {
suggestions: [
{
facets: [],
key: 'chips',
query: 'Chips',
totalResults: 10,
results: [],
modelName: 'PopularSearch',
},
],
}
},
}
</script>
```
In this example, the filters of the suggestion will be rendered along with the query.
The `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be
rendered along with the suggestion with filters.
This will render:
- Chips //If `showPlainSuggestion` is true
- Chips EXAMPLE
```vue
<template>
<BaseSuggestions :suggestions="suggestions" showFacets showPlainSuggestion />
</template>
<script>
import { BaseSuggestions } from '@empathyco/x-components'
export default {
name: 'BaseSuggestionsDemo',
components: {
BaseSuggestions,
},
data() {
return {
suggestions: [
{
facets: [
{
id: 'exampleFacet',
label: 'exampleFacet',
modelName: 'SimpleFacet',
filters: [
{
facetId: 'exampleFacet',
id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:"EXAMPLE"',
label: 'EXAMPLE',
selected: false,
totalResults: 10,
modelName: 'SimpleFilter',
},
],
},
],
key: 'chips',
query: 'Chips',
totalResults: 10,
results: [],
modelName: 'PopularSearch',
},
],
}
},
}
</script>
```
In this example, the `contentClass` prop can be used to add classes to the suggestion item.
```vue
<template>
<BaseSuggestions :suggestions="suggestions" suggestionItemClass="x-custom-class" />
</template>
<script>
import { BaseSuggestions } from '@empathyco/x-components'
export default {
name: 'BaseSuggestionsDemo',
components: {
BaseSuggestions,
},
data() {
return {
suggestions: [
{
facets: [],
key: 'chips',
query: 'Chips',
totalResults: 10,
results: [],
modelName: 'PopularSearch',
},
],
}
},
}
</script>
```