@empathyco/x-components
Version:
Empathy X Components
198 lines (171 loc) • 6.58 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
<template>
<BaseSuggestions :suggestions="suggestions">
<template #default="{ suggestion }">
<button @click="emitSuggestionSelected($event, suggestion)">
{{ suggestion.query }}
</button>
</template>
</BaseSuggestions>
</template>
<script setup>
import { ref } from "vue";
import { BaseSuggestions } from "@empathyco/x-components";
import { use$x } from "../../composables";
const x = use$x();
const suggestions = ref([
{
query: "Chips",
facets: [],
key: "chips",
totalResults: 10,
results: [],
modelName: "PopularSearch",
},
{
query: "Puzzle",
facets: [],
key: "puzzle",
totalResults: 5,
results: [],
modelName: "PopularSearch",
},
]);
function emitSuggestionSelected(event, suggestion) {
x.emit("UserAcceptedAQuery", suggestion.query, { target: event.target });
x.emit("UserSelectedAQuerySuggestion", suggestion, { target: event.target });
}
</script>
```
### 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 setup>
import { BaseSuggestions } from "@empathyco/x-components";
const suggestions = [
{
facets: [],
key: "chips",
query: "Chips",
totalResults: 10,
results: [],
modelName: "PopularSearch",
},
{
facets: [],
key: "puzzle",
query: "Puzzle",
totalResults: 5,
results: [],
modelName: "PopularSearch",
},
{
facets: [],
key: "lego",
query: "Lego",
totalResults: 8,
results: [],
modelName: "PopularSearch",
},
{
facets: [],
key: "car",
query: "Car",
totalResults: 3,
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 setup>
import { BaseSuggestions } from "@empathyco/x-components";
const 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 `suggestionItemClass` prop can be used to add classes to the suggestion item.
```vue
<template>
<BaseSuggestions
:suggestions="suggestions"
suggestionItemClass="x-custom-class"
/>
</template>
<script setup>
import { BaseSuggestions } from "@empathyco/x-components";
const suggestions = [
{
facets: [],
key: "chips",
query: "Chips",
totalResults: 10,
results: [],
modelName: "PopularSearch",
},
];
</script>
```