@empathyco/x-components
Version:
Empathy X Components
79 lines (59 loc) • 2.99 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 component 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 setup>
import { PopularSearch } from "@empathyco/x-components/popular-searches";
import { ref } from "vue";
const suggestion = ref({
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 setup>
import { PopularSearch } from "@empathyco/x-components/popular-searches";
import { TrendingIcon } from "@empathyco/x-components";
import { ref } from "vue";
const suggestion = ref({
modelName: "PopularSearch",
query: "tshirt",
facets: [],
});
</script>
```