@empathyco/x-components
Version:
Empathy X Components
99 lines (78 loc) • 3.22 kB
Markdown
---
title: PopularSearch
---
# PopularSearch
Renders a popular search item which receives the suggestion that will be rendered as a prop. It
exposes a default slot to change the popular search content. If the slot is not overridden,
it will render the suggestion query by default.
## Props
| Name | Description | Type | Default |
| ----------------------- | ----------------------------------------------------- | ----------------------- | ------------- |
| <code>suggestion</code> | The suggestion to render and use in the default slot. | <code>Suggestion</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| <code>default</code> | Popular Search content | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |
## Events
A list of events that the component will emit:
- [`UserSelectedAPopularSearch`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button. The event payload is the popular search
data.
## Examples
This components expects just a suggestion as a prop to be rendered. It has a slot to override the
content. By default, it renders the suggestion query of the popular search.
### Basic Usage
```vue live
<template>
<PopularSearch :suggestion="suggestion" />
</template>
<script>
import { PopularSearch } from '@empathyco/x-components/popular-searches'
export default {
name: 'PopularSearchDemo',
components: {
PopularSearch,
},
data() {
return {
suggestion: {
modelName: 'PopularSearch',
query: 'tshirt',
facets: [],
},
}
},
}
</script>
```
### Custom Usage
```vue live
<template>
<PopularSearch :suggestion="suggestion">
<template #default="{ suggestion }">
<TrendingIcon />
<span :aria-label="suggestion.query">{{ suggestion.query }}</span>
</template>
</PopularSearch>
</template>
<script>
import { PopularSearch } from '@empathyco/x-components/popular-searches'
import { TrendingIcon } from '@empathyco/x-components'
export default {
name: 'PopularSearchDemo',
components: {
PopularSearch,
TrendingIcon,
},
data() {
return {
suggestion: {
modelName: 'PopularSearch',
query: 'tshirt',
facets: [],
},
}
},
}
</script>
```