@empathyco/x-components
Version:
Empathy X Components
104 lines (81 loc) • 3.38 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 and exposes a slot to 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>
<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import { ResultsList } from "@empathyco/x-components/search";
</script>
```
### Configuring the number of partials
Set the maximum partials to show to 3.
```vue
<template>
<PartialResultsList :maxItemsToRender="3">
<template #default="{ partialResult }">
<ResultsList :results="partialResult.results" />
</template>
</PartialResultsList>
</template>
<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import { ResultsList } from "@empathyco/x-components/search";
</script>
```
### 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>
<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import {
BaseGrid,
BaseResultLink,
BaseResultImage,
} from "@empathyco/x-components";
import { PartialQueryButton } from "@empathyco/x-components/search";
</script>
```