@empathyco/x-components
Version:
Empathy X Components
201 lines (163 loc) • 6.91 kB
Markdown
---
title: QueryPreview
---
# QueryPreview
Retrieves a preview of the results of a query and exposes them in the default slot,
along with the query preview and the totalResults of the search request.
By default, it renders the names of the results.
## Props
| Name | Description | Type | Default |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ------------------ |
| <code>queryPreviewInfo</code> | The information about the request of the query preview. | <code>QueryPreviewInfo</code> | <code></code> |
| <code>queryFeature</code> | The origin property for the request. | <code>QueryFeature</code> | <code></code> |
| <code>maxItemsToRender</code> | Number of query preview results to be rendered. | <code>number</code> | <code></code> |
| <code>debounceTimeMs</code> | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code> | <code>0</code> |
| <code>persistInCache</code> | Controls whether the QueryPreview should be removed from the state<br />when the component is destroyed. | <code>boolean</code> | <code>false</code> |
## Events
| Event name | Properties | Description |
| ---------- | ---------- | ----------- |
| load | |
| error | |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ------------------- | -------------------------- | ------------------------------------------------------- |
| <code>result</code> | Query Preview result slot. | **result** <code>Result</code> - A Query Preview result |
## Events
A list of events that the component will emit:
- [`QueryPreviewRequestUpdated`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted when the component is mounted and when the properties of the request object
changes. The event payload is the `queryPreviewRequest` object.
## Vue Events
A list of vue events that the component will emit:
- `load`: the event is emitted when the query results have been loaded.
- `error`: the event is emitted if there is some error when retrieving the query results.
## See it in action
Here you have a basic example of how the QueryPreview is rendered. Keep in mind that this component
is intended to be used overriding its default slot. By default it will only render the names of the
results.
```vue live
<template>
<QueryPreview :queryPreviewInfo="queryPreviewInfo" />
</template>
<script>
import { QueryPreview } from '@empathyco/x-components/queries-preview'
export default {
name: 'QueryPreviewDemo',
components: {
QueryPreview,
},
data() {
return {
queryPreviewInfo: { query: 'sandals' },
}
},
}
</script>
```
### Play with the default slot
In this example, the results will be rendered inside a sliding panel.
```vue live
<template>
<QueryPreview :queryPreviewInfo="queryPreviewInfo" #default="{ totalResults, results }">
<section>
<p>Total results: {{ totalResults }}</p>
<SlidingPanel :resetOnContentChange="false">
<article
v-for="result in results"
:key="result.id"
class="x-result"
style="max-width: 300px; overflow: hidden"
>
<BaseResultLink :result="result">
<BaseResultImage :result="result" class="x-result__picture" />
</BaseResultLink>
<div class="x-result__description">
<BaseResultLink :result="result">
<h1 class="x-title3">{{ result.name }}</h1>
</BaseResultLink>
</div>
</article>
</SlidingPanel>
</section>
</QueryPreview>
</template>
<script>
import { QueryPreview } from '@empathyco/x-components/queries-preview'
import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'
export default {
name: 'QueryPreviewDemoOverridingSlot',
components: {
BaseResultImage,
BaseResultLink,
QueryPreview,
SlidingPanel,
},
data() {
return {
queryPreviewInfo: { query: 'flip-flops' },
}
},
}
</script>
```
### Play with the result slot
The component exposes a slot to override the result content, without modifying the list.
In this example, the ID of the results will be rendered along with the name.
```vue
<template>
<QueryPreview :queryPreviewInfo="queryPreviewInfo" #result="{ result }">
<span>{{ result.id }}</span>
<span>{{ result.name }}</span>
</QueryPreview>
</template>
<script>
import { QueryPreview } from '@empathyco/x-components/queries-preview'
export default {
name: 'QueryPreviewDemoOverridingResultSlot',
components: {
QueryPreview,
},
data() {
return {
queryPreviewInfo: { query: 'flip-flops' },
}
},
}
</script>
```
### Play with props
In this example, the query preview has been limited to render a maximum of 4 results.
```vue
<template>
<QueryPreview
:maxItemsToRender="maxItemsToRender"
:queryPreviewInfo="queryPreviewInfo"
#default="{ results }"
>
<BaseGrid #default="{ item }" :items="results">
<BaseResultLink :result="item">
<BaseResultImage :result="item" />
</BaseResultLink>
</BaseGrid>
</QueryPreview>
</template>
<script>
import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'
import { QueryPreview } from '@empathyco/x-components/queries-preview'
export default {
name: 'QueryPreviewDemo',
components: {
BaseGrid,
BaseResultImage,
BaseResultLink,
QueryPreview,
},
data() {
return {
maxItemsToRender: 4,
queryPreviewInfo: { query: 'flip-flops' },
}
},
}
</script>
```