Parity Widget Showcase

<template>
  <AisInstantSearch :configuration="configuration" instance-key="showcase">
    <AisConfigure
      :search-parameters="{
        hitsPerPage: 6,
        query: 'apple',
        attributesToSnippet: ['description:16'],
      }"
    />

    <AisConfigureRelatedItems :hit="relatedHit" :matching-patterns="matchingPatterns" />
    <AisExperimentalConfigureRelatedItems :hit="relatedHit" :matching-patterns="matchingPatterns" />

    <AisQueryRuleContext :tracked-filters="trackedFilters" />

    <AisSearchBox />
    <AisBreadcrumb :attributes="hierarchicalAttributes" />
    <AisHitsPerPage :items="hitsPerPageItems" />
    <AisVoiceSearch />
    <AisPoweredBy />

    <AisDynamicWidgets :transform-items="fallbackDynamicAttributes">
      <AisRefinementList attribute="brand" />
      <AisMenu attribute="categories" />
    </AisDynamicWidgets>

    <AisExperimentalDynamicWidgets :transform-items="fallbackDynamicAttributes">
      <AisRefinementList attribute="brand" />
    </AisExperimentalDynamicWidgets>

    <AisRelevantSort />

    <AisHits>
      <template #item="{ item }">
        <AisSnippet :hit="item" attribute="description" />
      </template>
    </AisHits>

    <AisQueryRuleCustomData />
  </AisInstantSearch>
</template>

<script setup lang="ts">
import { algoliasearch } from "algoliasearch";

const configuration = {
  indexName: "instant_search",
  searchClient: algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76"),
};

const hierarchicalAttributes = [
  "hierarchicalCategories.lvl0",
  "hierarchicalCategories.lvl1",
  "hierarchicalCategories.lvl2",
];

const hitsPerPageItems = [
  { label: "6 hits", value: 6, default: true },
  { label: "12 hits", value: 12 },
  { label: "24 hits", value: 24 },
];

const fallbackDynamicAttributes = (items: string[]) => {
  return items.length ? items : ["brand", "categories"];
};

const relatedHit = {
  objectID: "showcase-related-hit",
  brand: "Apple",
  categories: ["Electronics", "Audio"],
};

const matchingPatterns = {
  brand: { score: 3 },
  categories: { score: 2 },
};

const trackedFilters = {
  brand: (values: Array<string | number | boolean>) => values,
};
</script>