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.	union	'ul'
maxItemsToRender	Maximum number of partial results to show.	number	5

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Partial results item content	partialResult Partial - Partial Result data

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:

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

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

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