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
animation	Animation component that will be used to animate the partial results.	AnimationProp	'ul'
maxItemsToRender	Maximum number of partial results to show.	number	5

Slots

Name	Description	Bindings (name - type - description)
default	(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:

<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.

<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.

<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>