1 min read

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