@empathyco/x-components
Version:
Empathy X Components
84 lines (64 loc) • 2.82 kB
Markdown
---
title: PartialResultsList
---
# PartialResultsList
It renders a list of partial results from SearchState.partialResults by default.
It also provides the partial result slot to customize the item with the partial result bound.
## Props
| Name | Description | Type | Default |
| ----------------------------- | --------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code> | Animation component that will be used to animate the partial results. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Maximum number of partial results to show. | <code>number</code> | <code>5</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | --------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Partial results item content | |
## Examples
This component loops through an array of partials an exposed a slot to use customize each partial.
### Basic example
It renders a list of partial results using the default slot:
```vue
<template>
<PartialResultsList>
<template #default="{ partialResult }">
<ResultsList :results="partialResult.results" />
</template>
</PartialResultsList>
</template>
```
### Configuring the number of partials
It sets the maximum partials to show to 3.
```vue
<template>
<PartialResultsList :maxItemsToRender="3">
<template #default="{ partialResult }">
<ResultsList :results="partialResult.results" />
</template>
</PartialResultsList>
</template>
```
### Rendering usage
It renders a list of partial results using the default slot. It will show the query, the partial
results and a button to update the query with the partial one.
```vue
<template>
<PartialResultsList>
<template #default="{ partialResult }">
<span>{{ partialResult.query }}</span>
<BaseGrid :columns="4" :items="partialResult.results">
<template #result="{ item }">
<BaseResultLink :result="item">
<template #default="{ item }">
<BaseResultImage :result="item" />
<span class="x-result__title">{{ item.name }}</span>
</template>
</BaseResultLink>
</template>
</BaseGrid>
<PartialQueryButton :query="partialResult.query">
<template #default="{ query }">Ver todos {{ query }}</template>
</PartialQueryButton>
</template>
</PartialResultsList>
</template>
```