@empathyco/x-components
Version:
Empathy X Components
96 lines (72 loc) • 2.5 kB
Markdown
---
title: QueryPreviewButton
---
# QueryPreviewButton
Component containing an event button that emits
QueriesPreviewXEvents.UserAcceptedAQueryPreview when clicked with
the full query preview info as payload.
It has a default slot to customize its contents.
## Props
| Name | Description | Type | Default |
| ----------------------------- | ------------------------------------------------------------ | --------------------------------------------- | ------------- |
| <code>queryPreviewInfo</code> | The information about the request of the query preview. | <code>QueryPreviewInfo</code> | <code></code> |
| <code>metadata</code> | The metadata property for the request on each query preview. | <code>Omit<WireMetadata, 'moduleName'></code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------- | ----------------------------------------- |
| <code>default</code> | Button content with a text, an icon or both | |
## Examples
### Basic example
The component content has the query preview query as default
```vue
<template>
<div>
<QueryPreviewButton queryPreviewInfo="queryPreviewInfo" />
</div>
</template>
<script>
import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
export default {
components: {
QueryPreviewButton,
},
data: function () {
return {
queryPreviewInfo: {
query: 'shoes',
},
}
},
}
</script>
```
### Customizing slots
The content of the button is customizable via its default slot
```vue
<template>
<div>
<QueryPreviewButton queryPreviewInfo="queryPreviewInfo">
{{ `Search for: ${queryPreviewInfo.query}` }}
</QueryPreviewButton>
</div>
</template>
<script>
import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
export default {
components: {
QueryPreviewButton,
},
data: function () {
return {
queryPreviewInfo: {
query: 'shoes',
},
}
},
}
</script>
```
## Events
A list of events that the component will emit:
- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event
payload is the `QueryPreviewInfo` of the query.