@meeovi/layer-search 1.0.3

package/app/components/molecules/SocialLink.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import GithubIcon from '~/components/atoms/GithubIcon.vue'
+import TwitterIcon from '~/components/atoms/TwitterIcon.vue'
+import DiscordIcon from '~/components/atoms/DiscordIcon.vue'
+import WebIcon from '~/components/atoms/WebIcon.vue'
+
+const props = defineProps<{
+  url: string
+  icon: 'discord' | 'github' | 'twitter' | 'web'
+}>()
+
+const iconComponent = computed(() => {
+  const icon = toRef(props, 'icon')
+  switch (icon.value) {
+    case 'discord':
+      return DiscordIcon
+    case 'github':
+      return GithubIcon
+    case 'twitter':
+      return TwitterIcon
+    case 'web':
+      return WebIcon
+  }
+})
+</script>
+
+<template>
+  <a :href="url" target="_blank" class="social-link">
+    <component :is="iconComponent" class="social-icon" height="36" width="36" />
+  </a>
+</template>
+
+<style>
+.social-link {
+  display: inline-flex;
+  color: var(--ashes-900);
+}
+
+.social-link:hover {
+  color: var(--dodger-blue-500);
+}
+</style>

package/app/components/molecules/StarRating.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import SolidStarIcon from '~/components/atoms/SolidStarIcon.vue'
+import HalfSolidStarIcon from '~/components/atoms/HalfSolidStarIcon.vue'
+
+const props = defineProps({
+  rating: {
+    type: Number,
+    required: true,
+    validator: (value: number) => (value >= 0 && value <= 5)
+  }
+})
+
+const ratingText = computed(() => `${props.rating} out of 5`)
+
+const solidStars = computed(() => Math.floor(props.rating))
+
+const halfStars = computed(() => {
+  // If there are 5 full stars OR if there's no decimal part
+  if (solidStars.value === 5 || props.rating % 1 === 0) {
+    return 0
+  }
+  return (props.rating % 1) >= 0.299 // JS % operator is weird
+    ? 1
+    : 0
+})
+
+const emptyStars = computed(() => (5 - solidStars.value - halfStars.value))
+</script>
+
+<template>
+  <span :title="ratingText" class="star-rating">
+    <SolidStarIcon v-for="i in solidStars" :key="i" height="14" width="14" class="star-icon" />
+    <HalfSolidStarIcon v-if="halfStars === 1" height="14" width="14" class="star-icon" />
+    <StarIcon v-for="i in emptyStars" :key="i" height="14" width="14" class="star-icon" />
+  </span>
+</template>
+
+<style>
+.star-icon path {
+  fill: currentColor;
+}
+</style>
+
+<style scoped>
+.star-rating {
+  display: inline-flex;
+}
+</style>

package/app/components/organisms/LoadingIndicator.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { HollowDotsSpinner } from 'epic-spinners'
+</script>
+
+<template>
+  <HollowDotsSpinner
+    :animation-duration="1000"
+    :dot-size="15"
+    :dots-num="3"
+    color="#FF5CAA"
+  />
+</template>

package/app/components/organisms/MeiliSearchBar.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { AisSearchBox } from 'vue-instantsearch/vue3/es'
+</script>
+
+<template>
+  <AisSearchBox>
+    <template #default="{ currentRefinement, refine }">
+      <SearchInput
+        :value="currentRefinement"
+        @input="refine($event.currentTarget.value)"
+        @reset="refine('')"
+      />
+    </template>
+  </AisSearchBox>
+</template>

package/app/components/organisms/MeiliSearchFacetFilter.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { AisRefinementList } from 'vue-instantsearch/vue3/es'
+import pluralize from 'pluralize'
+
+type SortingOrder = 'isRefined' | 'count' | 'name'
+
+const props = defineProps<{
+  attribute: string
+  initialSortBy: SortingOrder
+}>()
+
+const searchInput = ref<string>('')
+const sortingOrder = ref<SortingOrder>(props.initialSortBy)
+
+const refineFacet = (searchFn: any, inputValue: string) => {
+  searchInput.value = inputValue
+  searchFn(inputValue)
+}
+
+const sortingOptions: Array<{value: SortingOrder, label: string}> = [
+  { value: 'count', label: 'By count' },
+  { value: 'name', label: 'By name' }
+]
+
+const sortBy = computed(() => {
+  return [
+    'isRefined',
+    sortingOrder.value
+  ]
+})
+
+const attributePlural = computed(() => pluralize(props.attribute))
+
+const filterOutEmptyFacets = (items: any) => {
+  return items.filter((item: any) => item.count > 0)
+}
+</script>
+
+<template>
+  <AisRefinementList
+    :attribute="props.attribute"
+    :searchable="true"
+    :show-more="true"
+    :show-more-limit="50"
+    :sort-by="sortBy"
+    operator="or"
+  >
+    <template
+      #default="{ items, refine, searchForItems, isFromSearch, isShowingMore, canToggleShowMore, toggleShowMore }"
+    >
+      <div class="flex items-baseline">
+        <BaseTitle class="mb-3 text-valhalla-100">
+          {{ props.attribute }}
+        </BaseTitle>
+        <select v-model="sortingOrder" class="ml-auto text-ashes-900">
+          <BaseText
+            v-for="option in sortingOptions"
+            :key="option.value"
+            tag="option"
+            :value="option.value"
+            :selected="props.initialSortBy === option.value"
+          >
+            {{ option.label }}
+          </BaseText>
+        </select>
+      </div>
+      <SearchInput
+        class="mb-3"
+        :placeholder="`Search ${attributePlural}`"
+        :value="searchInput"
+        @input="refineFacet(searchForItems, $event.target.value)"
+        @reset="refineFacet(searchForItems, '')"
+      />
+      <div class="mb-3">
+        <BaseText v-if="isFromSearch && !items.length" tag="span" size="m" class="text-ashes-900">
+          No results.
+        </BaseText>
+        <BaseCheckbox
+          v-for="item in filterOutEmptyFacets(items)"
+          :key="item.value"
+          :value="item.isRefined"
+          :label="item.label"
+          :name="item.value"
+          :disabled="item.count === 0"
+          @change="refine(item.value)"
+        >
+          <BaseText tag="span" size="m" :class="[ item.count ? 'text-valhalla-500' : 'text-ashes-900']">
+            <span v-dompurify-html="item.label" /> <BaseText tag="span" size="s" class="text-ashes-900">
+              ({{ item.count.toLocaleString() }})
+            </BaseText>
+          </BaseText>
+        </BaseCheckbox>
+      </div>
+      <BaseTitle v-show="canToggleShowMore" tag="span">
+        <a
+          href="#"
+          class="link"
+          @click.prevent="toggleShowMore"
+        >
+          {{ !isShowingMore ? 'Show more' : 'Show less' }}
+        </a>
+      </BaseTitle>
+    </template>
+  </AisRefinementList>
+</template>
+
+<style scoped>
+.link {
+  text-decoration: none;
+  color: var(--ashes-900);
+}
+
+select {
+  border: 0;
+}
+</style>

package/app/components/organisms/MeiliSearchLoadingProvider.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="state">
+    <slot name="default" :is-search-stalled="state.searchMetadata.isSearchStalled" />
+  </div>
+</template>
+
+<script>
+import { createWidgetMixin } from 'vue-instantsearch/vue3/es'
+
+const connectSearchMetaData =
+  (renderFn, unmountFn) =>
+    (widgetParams = {}) => ({
+      init () {
+        renderFn({ searchMetadata: {} }, true)
+      },
+
+      render ({ searchMetadata }) {
+        renderFn({ searchMetadata }, false)
+      },
+
+      dispose () {
+        unmountFn()
+      }
+    })
+
+export default {
+  mixins: [createWidgetMixin({ connector: connectSearchMetaData })]
+}
+</script>

package/app/components/organisms/MeiliSearchPagination.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { AisPagination } from 'vue-instantsearch/vue3/es'
+import PageNumber from '~/components/molecules/PageNumber.vue'
+</script>
+
+<template>
+  <AisPagination>
+    <template #default="{ currentRefinement, pages, refine, nbPages, isFirstPage, isLastPage }">
+      <!-- First page -->
+      <PageNumber
+        v-if="!isFirstPage && !pages.includes(0)"
+        :has-gap-separator="!pages.includes(1)"
+        :is-current="currentRefinement === 0"
+        @page-click="refine(0)"
+      >
+        Page 1
+      </PageNumber>
+      <!-- Current page and 3 previous/next -->
+      <PageNumber
+        v-for="(page, index) in pages"
+        :key="page"
+        :show-separator="index < (pages.length-1)"
+        :is-current="currentRefinement === page"
+        @page-click="refine(page)"
+      >
+        Page {{ page + 1 }}
+      </PageNumber>
+      <!-- Last page -->
+      <PageNumber
+        v-if="!isLastPage && !pages.includes(nbPages-1)"
+        separator="before"
+        :has-gap-separator="!pages.includes(nbPages-2)"
+        :is-current="currentRefinement === nbPages-1"
+        @page-click="refine(nbPages-1)"
+      >
+        Page {{ nbPages }}
+      </PageNumber>
+    </template>
+  </AisPagination>
+</template>

package/app/components/organisms/MeiliSearchProvider.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { AisInstantSearch, AisInstantSearchSsr } from 'vue-instantsearch/vue3/es'
+
+const props = withDefaults(defineProps<{
+  ssr?: boolean
+  indexName: string
+  initialQuery?: string
+}>(), {
+  ssr: false,
+  initialQuery: ''
+})
+
+const { ssr, indexName, initialQuery } = toRefs(props)
+
+if (ssr) {
+  const { instantsearch } = useServerRootMixin(indexName.value)
+
+  const { data: searchResults } = await useFetch('/api/search', {
+    method: 'POST',
+    body: { query: initialQuery.value }
+  })
+
+  // TODO: fix caveat with children components rendering using `instantsearch.findResultsState()`
+
+  instantsearch.hydrate({
+    [indexName.value]: searchResults.value
+  })
+}
+
+const instantSearchComponent = computed(() => ssr.value ? AisInstantSearchSsr : AisInstantSearch)
+
+const attributes = computed(() => {
+  if (ssr.value) {
+    return {
+      [indexName.value]: {
+        query: initialQuery.value
+      }
+    }
+  }
+  return {
+    indexName: indexName.value,
+    searchClient: useMeilisearch()
+  }
+})
+</script>
+
+<template>
+  <component :is="instantSearchComponent" v-bind="attributes">
+    <slot name="default" />
+  </component>
+</template>

package/app/components/organisms/MeiliSearchRangeFilter.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { AisRangeInput } from 'vue-instantsearch/vue3/es'
+
+interface Range {
+  min: number
+  max: number
+}
+
+const props = defineProps<{
+  attribute: string
+}>()
+
+const { attribute } = toRefs(props)
+
+const toValue = (currentValue: Range, boundaries: Range): [number, number] => {
+  return [
+    typeof currentValue.min === 'number' ? currentValue.min : boundaries.min,
+    typeof currentValue.max === 'number' ? currentValue.max : boundaries.max
+  ]
+}
+</script>
+
+<template>
+  <AisRangeInput :attribute="attribute">
+    <template #default="{ currentRefinement, range, refine }">
+      <BaseTitle class="mb-3 text-valhalla-100">
+        {{ attribute }}
+      </BaseTitle>
+      <div class="slider-labels text-valhalla-500 mb-2">
+        <BaseText size="m">
+          <span class="text-ashes-900">$ </span>{{ currentRefinement.min ?? range.min }}
+        </BaseText>
+        <BaseText size="m">
+          <span class="text-ashes-900">$ </span>{{ currentRefinement.max ?? range.max }}
+        </BaseText>
+      </div>
+      <RangeSlider
+        :model-value="toValue(currentRefinement, range)"
+        :min="range.min"
+        :max="range.max"
+        @update:model-value="refine($event)"
+      />
+    </template>
+  </AisRangeInput>
+</template>
+
+<style scoped>
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

package/app/components/organisms/MeiliSearchRatingFilter.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { AisRatingMenu } from 'vue-instantsearch/vue3/es'
+
+const props = defineProps<{
+  attribute: string
+  label?: string
+}>()
+
+const { attribute, label } = toRefs(props)
+</script>
+
+<template>
+  <AisRatingMenu
+    :attribute="attribute"
+    :max="5"
+  >
+    <template #default="{ items, refine }">
+      <BaseTitle class="mb-3 text-valhalla-100">
+        {{ label ?? attribute }}
+      </BaseTitle>
+      <a
+        v-for="item in items"
+        :key="item.value"
+        class="rating-link"
+        :class="[item.isRefined ? 'text-dodger-500' : 'text-valhalla-500']"
+        href="#"
+        @click.prevent="refine(item.value)"
+      >
+        <span class="rating-label">
+          <StarRating :rating="Number(item.value)" />
+          <BaseText
+            tag="span"
+            size="m"
+            class="ml-1"
+          >
+            & Up
+            <BaseText tag="span" size="s" class="text-ashes-900">
+              ({{ item.count.toLocaleString() }})
+            </BaseText>
+          </BaseText>
+        </span>
+      </a>
+    </template>
+  </AisRatingMenu>
+</template>
+
+<style src="~/assets/css/components/rating-filter.css" scoped />

package/app/components/organisms/MeiliSearchResults.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { AisInfiniteHits } from 'vue-instantsearch/vue3/es'
+</script>
+
+<template>
+  <AisInfiniteHits>
+    <template
+      #default="{
+        items,
+        refineNext,
+        isLastPage,
+      }"
+    >
+      <div class="items mb-10">
+        <ProductCard
+          v-for="product in items"
+          :key="product.uniq_id"
+          :name="product.name"
+          :brand="product.brand"
+          :price="product.price"
+          :image-url="product.image_url.split('|')[0]"
+          :rating="product.rating"
+          :reviews-count="product.reviews_count"
+        />
+      </div>
+      <div v-if="!isLastPage">
+        <BaseButton size="large" color="dodger-blue" class="m-auto" @click="refineNext">
+          Show more results
+        </BaseButton>
+      </div>
+    </template>
+  </AisInfiniteHits>
+</template>
+
+<style src="~/assets/css/components/results-grid.css" scoped />

package/app/components/organisms/MeiliSearchSorting.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { AisSortBy } from 'vue-instantsearch/vue3/es'
+
+const props = defineProps<{
+  options: Array<{
+    value: string
+    label: string
+  }>
+}>()
+
+const { options } = toRefs(props)
+</script>
+
+<template>
+  <AisSortBy :items="options">
+    <template #default="{ items, refine }">
+      <BaseSelect
+        :options="items"
+        @change="refine($event.target.value)"
+      />
+    </template>
+  </AisSortBy>
+</template>

package/app/components/organisms/MeiliSearchStats.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { AisStats } from 'vue-instantsearch/vue3/es'
+</script>
+
+<template>
+  <ais-stats>
+    <template #default="{ nbHits, processingTimeMS, query }">
+      <BaseText size="m" class="text-valhalla-100">
+        {{ nbHits }} results found in {{ processingTimeMS }}ms
+      </BaseText>
+    </template>
+  </ais-stats>
+</template>

package/app/components/organisms/ProductCard.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+// import { TwicImg } from '@twicpics/components/vue3'
+
+const props = defineProps<{
+  name: string
+  brand: string
+  price: number | null // some prices are null in our dataset
+  rating: number
+  reviewsCount: number
+  imageUrl: string
+}>()
+
+const { name, brand, price, rating, reviewsCount, imageUrl } = toRefs(props)
+
+const formattedPrice = computed(() => Number.isNaN(price) ? '-' : price)
+
+const optimizedImageUrl = computed(() => {
+  const v = imageUrl?.value ?? ''
+  return typeof v === 'string' ? v.replace('https://images-na.ssl-images-amazon.com/images/', '/product-images/') : ''
+})
+</script>
+
+<template>
+  <BaseCard class="product-card">
+    <TwicImg
+      :alt="name"
+      :src="optimizedImageUrl"
+      class="mb-5"
+    />
+    <div class="px-5 pb-5">
+      <BaseTitle size="xs" class="mb-1 text-hot-pink-500 -900">
+        {{ brand }}
+      </BaseTitle>
+      <BaseText
+        size="m"
+        class="mb-2 text-valhalla-500 product-name"
+        :title="name"
+      >
+        {{ name }}
+      </BaseText>
+      <BaseText size="l" class="mb-2">
+        <span class="text-ashes-900">$</span> <span class="text-valhalla-100">{{ formattedPrice }}</span>
+      </BaseText>
+      <div class="product-rating">
+        <BaseText size="s" class="mr-1 text-valhalla-100">
+          {{ rating }}
+        </BaseText>
+        <StarRating :rating="rating" class="my-auto mr-2 text-valhalla-100" />
+        <BaseText size="xs" class="text-ashes-900">
+          {{ reviewsCount }} reviews
+        </BaseText>
+      </div>
+    </div>
+  </BaseCard>
+</template>
+
+<style scoped>
+.product-card {
+  max-width: 250px;
+  transition: transform ease-in-out 150ms;
+}
+
+.product-card:hover {
+  box-shadow: 0px 0px 14px 8px rgba(77, 90, 125, 0.1), 0px 4px 66px rgba(77, 90, 125, 0.04);
+  transform: translateY(-5px);
+}
+
+.product-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.product-rating {
+  display: flex;
+  align-items: baseline;
+}
+</style>

package/app/components/organisms/TheNavbar.vue

@@ -0,0 +1,71 @@
+<template>
+  <nav class="p-5 navbar">
+    <div class="mobile-nav">
+      <div class="mb-5 menu">
+        <NuxtLink to="/">
+          <BaseLogo />
+        </NuxtLink>
+        <SocialLink url="https://github.com/meilisearch/ecommerce-demo" icon="github" class="ml-auto" />
+        <SocialLink url="https://blog.meilisearch.com/nuxt-ecommerce-search-guide/?utm_campaign=ecommerce-demo&utm_source=demo" icon="web" class="ml-2" />
+      </div>
+      <div class="mr-5 mobile-search-bar">
+        <slot name="search" />
+      </div>
+    </div>
+    <div class="tablet-nav">
+      <BaseLogo class="mr-5" />
+      <div class="tablet-search-bar">
+        <slot name="search" />
+      </div>
+      <SocialLink url="https://discord.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=preview&utm_medium=navbar" icon="discord" class="mr-5" />
+      <SocialLink url="https://twitter.com/meilisearch" icon="twitter" class="mr-5" />
+      <SocialLink url="https://github.com/meilisearch/ecommerce-demo" icon="github" class="mr-5" />
+      <SocialLink url="https://blog.meilisearch.com/nuxt-ecommerce-search-guide/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme" icon="web" />
+    </div>
+  </nav>
+</template>
+
+<style>
+.navbar {
+  background-color: var(--white);
+  padding-left: calc(2 * var(--size-5));
+  padding-right: calc(2 * var(--size-5));
+}
+
+.tablet-nav {
+  display: none;
+}
+
+.mobile-nav .menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mobile-search-bar {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .tablet-nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .tablet-search-bar {
+    margin-left: var(--size-5);
+    margin-right: var(--size-5);
+    flex-grow: 1;
+  }
+  .mobile-nav {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .tablet-search-bar {
+    margin-left: calc(4 * var(--size-5));
+    margin-right: calc(4 * var(--size-5));
+  }
+}
+</style>