cloudcommerce 2.0.0 → 2.0.1

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ImagesGallery.vue

@@ -8,7 +8,7 @@
       <li
         v-for="i in Math.ceil(pictures.length / 2)"
         :key="i"
-        class="grid h-1/3 w-full grid-cols-2 gap-3 px-1 pb-3"
+        class="grid w-full grid-cols-2 gap-3 px-1 pb-3"
         :class="i === 1 && 'pt-1'"
       >
         <template
@@ -17,7 +17,7 @@
         >
           <button
             v-if="index < pictures.length"
-            class="bg-secondary-100 h-full rounded"
+            class="bg-secondary-100 block rounded md:h-[175px]"
             @click="activeIndex = index"
           >
             <AImg
@@ -39,9 +39,10 @@
             class="hover:bg-primary-300/60 text-primary
             !bottom-3 !left-1/2 -ml-5 h-10 w-10
             rounded-full bg-white/60 text-xl
-            opacity-0 shadow-sm ring-1 ring-black/5
-            group-hover:opacity-90"
+            opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90"
           />
+          <span class="absolute bottom-0 block h-2 w-full
+            bg-gradient-to-b from-transparent to-white"></span>
         </span>
       </template>
     </Carousel>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/LoginForm.vue

@@ -17,7 +17,7 @@
       type="email"
       placeholder="email@mail.com"
       v-model="email"
-      class="mb-0.5 mt-2 w-full rounded"
+      class="mb-0.5 mt-2 w-full"
       required
     />
     <input
@@ -25,7 +25,7 @@
       type="password"
       :placeholder="$t.i19password"
       v-model="password"
-      class="mb-0.5 mt-2 w-full rounded lowercase"
+      class="mb-0.5 mt-2 w-full lowercase"
       required
     />
     <div class="relative">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/PageTitle.vue

@@ -0,0 +1,43 @@
+<template>
+  <section v-if="title" class="ui-section">
+    <div class="flex items-center gap-4">
+      <AImg
+        v-if="logo"
+        :picture="logo"
+        :alt="logo.alt || title"
+        class="h-auto max-w-[150px] xl:max-w-[200px]"
+      />
+      <h1 class="ui-title">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="prose">
+      <p v-if="description">
+        {{ description }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Categories, Brands, Collections } from '@cloudcommerce/api/types';
+
+export interface Props {
+  apiDoc?: Partial<Categories | Brands | Collections>;
+  title?: string;
+  description?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  apiDoc: () => globalThis.$storefront.apiContext?.doc as Categories,
+});
+const title = computed(() => {
+  return props.title || props.apiDoc?.name;
+});
+const logo = computed(() => {
+  return (props.apiDoc as Brands)?.logo;
+});
+const description = computed(() => {
+  return props.description || props.apiDoc?.short_description;
+});
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Pagination.vue

@@ -0,0 +1,67 @@
+<template>
+  <ol class="text-base-900 flex justify-center gap-1.5
+    text-center text-sm font-medium leading-9">
+    <li>
+      <ALink
+        :href="prevPageLink"
+        @click.prevent="prevPageLink && emit('update:page', page - 1)"
+        class="mr-1 block min-w-9 rounded border px-3"
+        :class="prevPageLink
+          ? 'border-base-100 hover:bg-base-100'
+          : 'border-transparent text-base-500'"
+      >
+        <i class="i-arrow-right rotate-180"></i>
+        <span class="ml-1.5 hidden md:inline">{{ $t.i19previous }}</span>
+      </ALink>
+    </li>
+    <li v-for="(pageN, i) in pages" :key="pageN">
+      <ALink
+        :href="pageN !== page ? pageLinks[i] : null"
+        @click.prevent="emit('update:page', pageN)"
+        class="block w-9 rounded border ring-black/10"
+        :class="pageN === page
+          ? 'bg-base-50 border-base-100 ring text-base-700'
+          : 'border-transparent hover:bg-base-100'"
+      >
+        {{ pageN }}
+      </ALink>
+    </li>
+    <li>
+      <ALink
+        :href="nextPageLink"
+        @click.prevent="nextPageLink && emit('update:page', page + 1)"
+        class="ml-1 block min-w-9 rounded border px-3"
+        :class="nextPageLink
+          ? 'border-base-100 hover:bg-base-100'
+          : 'border-transparent text-base-500'"
+      >
+        <span class="mr-1.5 hidden md:inline">{{ $t.i19next }}</span>
+        <i class="i-arrow-right"></i>
+      </ALink>
+    </li>
+  </ol>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UsePaginationProps,
+  usePagination,
+} from '@@sf/composables/use-pagination';
+
+export interface Props extends UsePaginationProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  page: 1,
+  maxPages: 7,
+  isUrlPath: false,
+});
+const emit = defineEmits<{
+  'update:page': [value: number]
+}>();
+const {
+  pages,
+  pageLinks,
+  prevPageLink,
+  nextPageLink,
+} = usePagination(props);
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Prices.vue

@@ -4,7 +4,7 @@
       [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
     :class="isBig ? 'text-lg' : null"
   >
-    <span v-if="comparePrice" class="text-base-500 mr-1 [font-size:87%]">
+    <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">
       <small v-if="isLiteral">
         {{ `${$t.i19from} ` }}
       </small>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductCard.vue

@@ -2,11 +2,11 @@
   <article
     ref="card"
     :data-sku="product.sku"
-    class="group relative mx-auto h-full max-w-[350px] py-3"
+    class="group relative mx-auto h-full max-w-[350px] px-0.5 py-3 hover:z-[1]"
   >
     <ALink
       :href="link"
-      class="flex h-full flex-col overflow-hidden rounded
+      class="flex h-full flex-col overflow-hidden rounded bg-white
       ring-black/5 group-hover:shadow group-hover:ring-1"
     >
       <div class="aspect-square p-2
@@ -44,8 +44,7 @@
       >
         -<strong>{{ discountPercentage }}</strong>%
       </span>
-      <div class="relative z-10 flex grow flex-col justify-start
-        bg-white/40 p-4 group-hover:backdrop-blur-md">
+      <div class="relative z-10 flex grow flex-col justify-between p-4">
         <div class="pb-2">
           <div v-if="isActive">
             <Prices :product="product" />

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductDetails.vue

@@ -6,8 +6,9 @@
         <ImagesGallery :pictures="product.pictures" />
       </template>
     </div>
-    <div class="top-0 py-4 lg:sticky">
-      <h1 class="ui-text-brand text-base-700 text-xl">
+    <div class="lg:sticky-header:translate-y-14 top-0 py-4
+      transition-transform lg:sticky">
+      <h1 class="ui-text-brand text-secondary-900 text-lg">
         {{ title }}
       </h1>
       <div v-if="isActive" class="mt-5">
@@ -25,7 +26,7 @@
           </div>
         </Fade>
         <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2
-          overflow-hidden md:flex-nowrap lg:mt-4 lg:flex-wrap">
+          md:flex-nowrap lg:mt-4 lg:flex-wrap">
           <QuantitySelector
             v-model="quantity"
             :min="product.min_quantity"

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductShelf.vue

@@ -1,48 +1,63 @@
 <template>
   <section class="ui-section">
-    <div v-if="title" class="mx-auto mb-2 max-w-prose text-center">
+    <div v-if="title" class="mx-auto mb-4 max-w-prose text-center">
       <h2 class="ui-text-brand text-3xl">
         <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
           {{ title }}
         </ALink>
       </h2>
     </div>
-    <Carousel class="group/shelf">
+    <Component
+      :is="isGrid ? 'ul' : 'Carousel'"
+      class="group/shelf"
+      :class="isGrid && 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4'"
+    >
       <li
         v-for="product in products"
         :key="product._id"
         class="shrink-0 basis-1/2 md:basis-1/3 lg:basis-1/4"
       >
-        <ProductCard :product="product" />
+        <ProductCard :product="product" :list-name="listName" />
       </li>
-      <template #controls>
-        <div
-          v-show="products.length > 2"
-          class="text-primary text-3xl leading-none transition-opacity
-          group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0"
-        >
-          <CarouselControl class="!lg:top-1/3 lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12
-            w-12 rounded bg-transparent ring-black/5
-            lg:bg-white/80 lg:shadow-sm lg:ring-1" is-prev />
-          <CarouselControl class="!lg:top-1/3 lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12
-            w-12 rounded bg-transparent ring-black/5
-            lg:bg-white/80 lg:shadow-sm lg:ring-1" />
-        </div>
+      <template v-if="!isGrid" #controls>
+        <DefineCarouselControl v-slot="{ isPrev }">
+          <CarouselControl
+            v-show="products.length > 2"
+            class=":uno: text-primary lg:hover:bg-primary-200 !top-1/2 h-12
+            w-12 rounded-full bg-transparent text-3xl leading-none
+            ring-black/5 backdrop-blur-md
+            transition-opacity group-hover/shelf:opacity-90
+            lg:bg-white/80 lg:text-2xl lg:opacity-0 lg:shadow-sm lg:ring-1"
+            :class="isPrev ? '!-left-4' : '!-right-4'"
+            :is-prev="isPrev"
+          />
+        </DefineCarouselControl>
+        <ReuseCarouselControl :is-prev="true" />
+        <ReuseCarouselControl />
       </template>
-    </Carousel>
+    </Component>
+    <slot name="append" />
   </section>
 </template>
 
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
 import {
   type Props as UseProductShelfProps,
   useProductShelf,
 } from '@@sf/composables/use-product-shelf';
+import { useId } from '@@sf/sf-lib';
 import ProductCard from '~/components/ProductCard.vue';
 
-export interface Props extends UseProductShelfProps {}
+export interface Props extends UseProductShelfProps {
+  isGrid?: boolean;
+}
 
 const props = defineProps<Props>();
+const [
+  DefineCarouselControl,
+  ReuseCarouselControl,
+] = createReusableTemplate<{ isPrev?: boolean }>();
 const {
   title,
   titleLink,
@@ -52,4 +67,5 @@ const {
 if (import.meta.env.SSR) {
   await fetching;
 }
+const listName = title.value || `Shelf ${useId()}`;
 </script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductSpecifications.vue

@@ -9,7 +9,7 @@
           border-dashed py-2 sm:grid-cols-3 [&:not(:last-child)]:border-b"
         >
           <span class="text-base-700">
-            {{ getGridTitle(`${gridId}`, grids) }}
+            {{ getGridTitle(`${gridId}`, grids || []) }}
           </span>
           <strong class="font-semibold sm:col-span-2">
             {{ getSpecTextValue(product, `${gridId}`, grids) }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchFilters.vue

@@ -0,0 +1,122 @@
+<template>
+  <aside class="bg-base-50/40 h-screen overflow-y-auto">
+    <header class="px-6 pb-3 pt-5 text-center">
+      <button
+        v-if="filtersCount"
+        class="ui-btn-sm ui-btn-danger py-1"
+        @click="clearFilters"
+      >
+        {{ $t.i19clearFilters }}
+        <i class="i-trash ml-0.5"></i>
+      </button>
+      <p v-else class="text-base-500 border border-transparent
+        pb-1 text-base font-semibold">
+        {{ $t.i19filterResults }}
+      </p>
+    </header>
+    <article v-if="resultBuckets" class="px-6 pb-3">
+      <Collapse
+        v-if="priceRanges"
+        :title="$t.i19price"
+        class="[&>summary]:text-xl"
+        open
+      >
+        <div class="space-y-1.5">
+          <div
+            v-for="({ range, key }) in priceRanges"
+            :key="`prices-${key}`"
+            class="flex items-center"
+          >
+            <input
+              type="radio"
+              :id="`priceRange-${key}`"
+              name="priceRange"
+              :value="key"
+              v-model="priceRangeKey"
+            />
+            <label
+              :for="`priceRange-${key}`"
+              class="cursor-pointer px-3 text-sm"
+            >
+              {{ getPriceRangeLabel(range) }}
+              <small class="text-base-500 font-medium">
+                ({{ range.count }})
+              </small>
+            </label>
+          </div>
+          <div
+            v-if="activeFilters['price<'] || activeFilters['price>']"
+            class="flex items-center"
+          >
+            <input
+              type="radio"
+              id="priceRange-null"
+              name="priceRange"
+              :value="null"
+              v-model="priceRangeKey"
+            />
+            <label for="priceRange-null" class="cursor-pointer px-3 text-sm">
+              {{ $t.i19anyPrice }}
+            </label>
+          </div>
+        </div>
+      </Collapse>
+      <Collapse
+        v-for="({ title, options, field }) in filterOptions"
+        :key="field"
+        :title="title"
+        class="[&>summary]:text-xl"
+        :open="!!activeFilters[field]"
+      >
+        <div class="space-y-1.5">
+          <div
+            v-for="(count, value, i) in options"
+            :key="`${field}-${i}`"
+            class="flex items-center"
+          >
+            <input
+              type="checkbox"
+              :id="`${field}-${value}`"
+              :value="value"
+              :checked="checkFilterOption(field, value)"
+              @change="toggleFilterOption(field, value)"
+            />
+            <label
+              :for="`${field}-${value}`"
+              class="cursor-pointer px-3 text-sm"
+            >
+              {{ value }}
+              <small class="text-base-500 font-medium">
+                ({{ count }})
+              </small>
+            </label>
+          </div>
+        </div>
+      </Collapse>
+    </article>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseSearchFiltersProps,
+  useSearchFilters,
+} from '@@sf/composables/use-search-filters';
+import Collapse from '~/components/Collapse.vue';
+
+export interface Props extends UseSearchFiltersProps {}
+
+const props = defineProps<Props>();
+const {
+  resultBuckets,
+  activeFilters,
+  filtersCount,
+  clearFilters,
+  priceRanges,
+  priceRangeKey,
+  getPriceRangeLabel,
+  filterOptions,
+  checkFilterOption,
+  toggleFilterOption,
+} = useSearchFilters(props);
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchModal.vue

@@ -1,6 +1,102 @@
 <template>
-  <div class="bg-base-300 h-40 w-full"></div>
+  <article class="relative">
+    <Fade slide="down">
+      <section
+        v-if="linkHits.length"
+        class="bg-white p-4"
+        :class="!isFetching && products.length ? 'lg:rounded-t' : 'lg:rounded'"
+      >
+        <nav>
+          <Carousel :wrapper-key="term" class="px-6 [&>ul]:gap-3">
+            <li
+              v-for="({ title, href }, i) in linkHits"
+              :key="i"
+              class="shrink-0"
+            >
+              <ALink :href="href" class="ui-link">
+                {{ title }}
+              </ALink>
+            </li>
+          </Carousel>
+        </nav>
+      </section>
+    </Fade>
+    <Skeleton v-if="isFetching" class="absolute top-0 w-full px-5 pt-20" />
+    <Fade :is-leave-to="false">
+      <ProductShelf
+        v-if="!isFetching && products.length"
+        :products="products"
+        class="m-0 max-w-none bg-white px-4
+        lg:[&_[data-carousel-control=next]]:!-right-10
+        lg:[&_[data-carousel-control=previous]]:!-left-10"
+        :class="linkHits.length ? 'lg:rounded-b' : 'lg:rounded'"
+      />
+    </Fade>
+    <Fade :is-leave-to="false">
+      <section
+        v-if="!isFetching
+          && (searchHistory.length || productCount > products.length)"
+        class="bg-base-100/80 grid grid-cols-1 items-center
+        gap-4 p-4 backdrop-blur-md
+        md:grid-cols-2 md:rounded-b lg:mt-5 lg:grid-cols-3 lg:rounded"
+      >
+        <div class="flex items-center justify-end gap-4 md:order-2">
+          <p
+            v-if="productCount > 1"
+            class="text-base-900 text-right text-sm lowercase"
+          >
+            <strong>{{ productCount }}</strong> {{ $t.i19itemsFound }}
+          </p>
+          <a
+            v-if="productCount > products.length"
+            :href="getSearchUrl(term)"
+            class="ui-btn ui-btn-primary w-auto whitespace-nowrap text-center"
+          >
+            {{ $t.i19seeAll }}
+          </a>
+        </div>
+        <div class="lg:col-span-2">
+          <nav>
+            <Carousel :wrapper-key="term" class="px-6 [&>ul]:gap-2.5">
+              <li
+                v-for="(term, i) in searchHistory"
+                :key="i"
+                class="shrink-0"
+              >
+                <a
+                  :href="getSearchUrl(term)"
+                  class="ui-link text-base-700 text-sm font-normal"
+                >
+                  {{ term }}
+                </a>
+              </li>
+              <template #previous>
+                <i class="i-clock m-0" :aria-label="$t.i19searchAgain"></i>
+              </template>
+            </Carousel>
+          </nav>
+        </div>
+      </section>
+    </Fade>
+  </article>
 </template>
 
 <script setup lang="ts">
+import {
+  type Props as UseSearchModalProps,
+  useSearchModal,
+} from '@@sf/composables/use-search-modal';
+import { getSearchUrl } from '@@sf/sf-lib';
+import ProductShelf from '~/components/ProductShelf.vue';
+
+export interface Props extends UseSearchModalProps {}
+
+const props = defineProps<Props>();
+const {
+  searchHistory,
+  isFetching,
+  products,
+  productCount,
+  linkHits,
+} = useSearchModal(props);
 </script>