cloudcommerce 0.2.3 → 0.3.0

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -35,22 +35,21 @@
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.3",
     "@fastify/deepmerge": "^1.3.0",
-    "@headlessui/vue": "^1.7.7",
+    "@headlessui/vue": "^1.7.8",
     "@iconify-json/fa6-brands": "^1.1.8",
     "@iconify-json/heroicons": "^1.1.8",
     "@iconify-json/logos": "^1.1.22",
     "@vite-pwa/astro": "^0.0.1",
-    "@vueuse/core": "^9.11.1",
+    "@vueuse/core": "^9.12.0",
     "astro": "^2.0.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
     "firebase": "^9.16.0",
     "image-size": "^1.0.2",
-    "lodash": "^4.17.21",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.4",
-    "unocss": "^0.48.4",
+    "unocss": "^0.49.1",
     "vite": "^4.0.4",
     "vite-plugin-pwa": "^0.14.1",
     "vue": "^3.2.45"

package/packages/storefront/src/lib/assets/base.css

@@ -1,5 +1,4 @@
 :root {
-  --content-max-width: 80rem;
   --font-size: 14.5px;
   --font-sans: var(--custom-font-sans, ui-sans-serif),
     system-ui, -apple-system, BlinkMacSystemFont,
@@ -8,6 +7,7 @@
   --font-mono: var(--custom-font-mono, ui-monospace),
     SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family: var(--font-sans);
+  --transition-fast: 75ms linear;
   --transition: .15s ease-in-out;
   --transition-slow: .25s ease-in-out;
   --transition-slower: .45s ease-in-out;
@@ -28,6 +28,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
+    --transition-fast: 0s;
     --transition: 0s;
     --transition-slow: 0s;
     --transition-slower: .15s linear;
@@ -63,16 +64,6 @@ html {
   }
 }
 
-body > header,
-body > main,
-body > footer {
-  margin-left: auto;
-  margin-right: auto;
-}
-body > main {
-  max-width: var(--content-max-width);
-}
-
 :focus-visible {
   outline-color: var(--c-outline, rgba(var(--rgb-secondary), .1));
 }
@@ -95,3 +86,17 @@ body {
   background: var(--c-background);
   color: var(--c-on-background);
 }
+
+/*
+Custom elements for responsive tricks in /content JSON.
+Avoids the need of escape \" for class names with common elements.
+*/
+
+d-md {
+  display: none;
+}
+@screen md {
+  d-md {
+    display: inline;
+  }
+}

package/packages/storefront/src/lib/components/Carousel.vue

@@ -4,13 +4,13 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
+  computed,
   watch,
   toRef,
   nextTick,
   provide,
 } from 'vue';
-import debounce from 'lodash/debounce';
-import { useElementHover } from '@vueuse/core';
+import { useDebounceFn, useElementHover, useScroll } from '@vueuse/core';
 import { carouselKey } from './_injection-keys';
 import CarouselControl from './CarouselControl.vue';
 
@@ -20,58 +20,30 @@ export interface Props {
   autoplay?: number; // milliseconds
 }
 
-const approximatelyEqual = (v1, v2, epsilon) => {
-  return Math.abs(v1 - v2) <= epsilon;
-};
-const SCROLL_DEBOUNCE = 100;
-const RESIZE_DEBOUNCE = 410;
-
 const props = withDefaults(defineProps<Props>(), {
   as: 'ul',
   modelValue: 1,
 });
 const emit = defineEmits([
   'update:modelValue',
-  'bound-left',
-  'bound-right',
 ]);
-
-const currentPage = ref(props.modelValue - 1);
+const currentIndex = ref(props.modelValue - 1);
 watch(toRef(props, 'modelValue'), (modelValue) => {
-  currentPage.value = modelValue - 1;
+  currentIndex.value = modelValue - 1;
 });
-watch(currentPage, (current, previous) => {
+watch(currentIndex, (current, previous) => {
   if (current !== previous) {
     emit('update:modelValue', current + 1);
   }
 });
 const wrapper = ref<HTMLElement>(null);
-const isBoundLeft = ref(true);
-const isBoundRight = ref(false);
+const { x: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
+const isBoundLeft = computed(() => arrivedState.left);
+const isBoundRight = computed(() => arrivedState.right);
 const slidesWidth = ref([]);
 const wrapperScrollWidth = ref(0);
 const wrapperVisibleWidth = ref(0);
-const currentPos = ref(0);
-const maxPages = ref(0);
-const onResizeFn = ref(null);
-const onScrollFn = ref(null);
-const calcBounds = () => {
-  // Find the closest point, with 5px approximate.
-  const _isBoundLeft = approximatelyEqual(currentPos.value, 0, 5);
-  const _isBoundRight = approximatelyEqual(
-    wrapperScrollWidth.value - wrapperVisibleWidth.value,
-    currentPos.value,
-    5,
-  );
-  if (_isBoundLeft) {
-    emit('bound-left', true);
-  }
-  isBoundLeft.value = _isBoundLeft;
-  if (_isBoundRight) {
-    emit('bound-right', true);
-  }
-  isBoundRight.value = _isBoundRight;
-};
+const indexCount = ref(0);
 const calcWrapperWidth = () => {
   wrapperScrollWidth.value = wrapper.value.scrollWidth;
   wrapperVisibleWidth.value = wrapper.value.offsetWidth;
@@ -84,48 +56,27 @@ const calcSlidesWidth = () => {
   }));
 };
 const calcNextWidth = (direction) => {
-  const nextSlideIndex = direction > 0 ? currentPage.value : currentPage.value + direction;
-  const width = slidesWidth.value[nextSlideIndex].width || 0;
+  const nextSlideIndex = direction > 0
+    ? currentIndex.value : currentIndex.value + direction;
+  const width = slidesWidth.value[nextSlideIndex]?.width || 0;
   if (!width) {
     return 0;
   }
   return width * direction;
 };
-const calcCurrentPage = () => {
-  const getCurrentPage = slidesWidth.value.findIndex((slide) => {
+const calcCurrentIndex = () => {
+  const getCurrentIndex = slidesWidth.value.findIndex((slide: HTMLElement) => {
     // Find the closest point, with 5px approximate.
-    return approximatelyEqual(slide.offsetLeft, currentPos.value, 5);
+    return Math.abs(slide.offsetLeft - currentPos.value) <= 5;
   });
-  if (getCurrentPage !== -1 && getCurrentPage !== -2) {
-    currentPage.value = getCurrentPage || 0;
+  if (getCurrentIndex > -1) {
+    currentIndex.value = getCurrentIndex || 0;
   }
 };
-const calcCurrentPosition = () => {
-  currentPos.value = wrapper.value.scrollLeft || 0;
-};
-const calcMaxPages = () => {
+const calcIndexCount = () => {
   const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
-  maxPages.value = slidesWidth.value
-    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos));
-};
-const calcOnInit = () => {
-  if (!wrapper.value) {
-    return;
-  }
-  calcWrapperWidth();
-  calcSlidesWidth();
-  calcCurrentPosition();
-  calcCurrentPage();
-  calcBounds();
-  calcMaxPages();
-};
-const calcOnScroll = () => {
-  if (!wrapper.value) {
-    return;
-  }
-  calcCurrentPosition();
-  calcCurrentPage();
-  calcBounds();
+  indexCount.value = slidesWidth.value
+    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos - 5));
 };
 let autoplayTimer = null;
 const restartAutoplay = () => {
@@ -140,13 +91,13 @@ const restartAutoplay = () => {
 const changeSlide = (direction: number) => {
   if (direction < 0) {
     if (isBoundLeft.value) {
-      calcMaxPages();
-      currentPage.value = maxPages.value - 1;
+      calcIndexCount();
+      currentIndex.value = indexCount.value - 1;
       changeSlide(1);
       return;
     }
   } else if (isBoundRight.value) {
-    currentPage.value = 1;
+    currentIndex.value = 1;
     changeSlide(-1);
     return;
   }
@@ -156,37 +107,50 @@ const changeSlide = (direction: number) => {
     restartAutoplay();
   }
 };
+watch(isScrolling, (_isScrolling: boolean) => {
+  if (_isScrolling) {
+    clearTimeout(autoplayTimer);
+  } else {
+    calcCurrentIndex();
+    restartAutoplay();
+  }
+});
 const carousel = ref(null);
 const isHovered = useElementHover(carousel);
-watch(isHovered, (_isHovered) => {
+watch(isHovered, (_isHovered: boolean) => {
   if (_isHovered) {
     clearTimeout(autoplayTimer);
   } else {
     restartAutoplay();
   }
 });
+const calcOnInit = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcWrapperWidth();
+  calcSlidesWidth();
+  calcCurrentIndex();
+  calcIndexCount();
+};
+const onResize = useDebounceFn(calcOnInit, 400);
 onMounted(() => {
   calcOnInit();
   if (!import.meta.env.SSR) {
-    // Assign to new variable and keep reference for removeEventListener (Avoid Memory Leaks)
-    onScrollFn.value = debounce(calcOnScroll, SCROLL_DEBOUNCE);
-    onResizeFn.value = debounce(calcOnInit, RESIZE_DEBOUNCE);
-    wrapper.value.addEventListener('scroll', onScrollFn.value);
-    window.addEventListener('resize', onResizeFn.value);
     nextTick(() => {
       [...wrapper.value.children].forEach((slide: HTMLElement) => {
         slide.setAttribute('tabindex', '0');
       });
     });
     restartAutoplay();
+    window.addEventListener('resize', onResize);
   }
 });
 onBeforeUnmount(() => {
   if (!import.meta.env.SSR) {
-    wrapper.value.removeEventListener('scroll', onScrollFn.value);
-    window.removeEventListener('resize', onResizeFn.value);
-    clearTimeout(autoplayTimer);
+    window.removeEventListener('resize', onResize);
   }
+  clearTimeout(autoplayTimer);
 });
 provide(carouselKey, {
   autoplay: toRef(props, 'autoplay'),
@@ -204,7 +168,13 @@ provide(carouselKey, {
     <!-- @slot Slot for Arrows -->
     <slot
       name="controls"
-      v-bind="{ changeSlide, isBoundLeft, isBoundRight }"
+      v-bind="{
+        changeSlide,
+        isBoundLeft,
+        isBoundRight,
+        currentPage: currentIndex + 1,
+        pageCount: indexCount + 1,
+      }"
     >
       <CarouselControl :direction="-1">
         <slot name="previous" />

package/packages/storefront/src/lib/components/Drawer.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import {
+  toRef,
+  ref,
+  computed,
+  watch,
+} from 'vue';
+import useComponentVariant from '@@sf/composables/use-component-variant';
+
+export interface Props {
+  modelValue?: boolean;
+  placement?: 'start' | 'end' | 'top' | 'bottom';
+  isTeleported?: boolean;
+  hasCloseButton?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  placement: 'start',
+  isTeleported: false,
+  hasCloseButton: true,
+});
+const emit = defineEmits([
+  'update:modelValue',
+]);
+const close = () => emit('update:modelValue', false);
+const anchor = ref(null);
+const canvas = ref(null);
+const outsideClickListener = (ev: MouseEvent) => {
+  if (!canvas.value?.contains(ev.target)) {
+    close();
+  }
+};
+const escClickListener = (ev: KeyboardEvent) => {
+  if (ev.key === 'Escape') {
+    close();
+  }
+};
+watch(toRef(props, 'modelValue'), async (isOpen) => {
+  const header = anchor.value.closest('[class*="backdrop-"]');
+  if (isOpen) {
+    document.body.style.overflow = 'hidden';
+    if (header) {
+      header.style.backdropFilter = 'none';
+    }
+    setTimeout(() => {
+      document.addEventListener('click', outsideClickListener, { passive: true });
+      document.addEventListener('keydown', escClickListener, { passive: true });
+    }, 500);
+  } else {
+    document.body.style.overflow = null;
+    if (header) {
+      setTimeout(() => {
+        header.style.backdropFilter = null;
+      }, 500);
+    }
+    document.removeEventListener('click', outsideClickListener);
+    document.removeEventListener('keydown', escClickListener);
+  }
+});
+const slideTo = computed(() => {
+  switch (props.placement) {
+    case 'start': return 'left';
+    case 'end': return 'right';
+    case 'top': return 'up';
+    default: return 'down';
+  }
+});
+const componentVariant = useComponentVariant(props, ['placement']);
+</script>
+
+<template>
+  <div ref="anchor" class="relative">
+    <Teleport to="#teleported" :disabled="!isTeleported">
+      <Fade :slide="slideTo" speed="slow" is-floating>
+        <dialog
+          v-if="modelValue"
+          class="w-screen max-w-sm p-0 z-50"
+          :class="isTeleported ? 'fixed top-0 left-0' : 'absolute'"
+          :open="modelValue"
+          :data-drawer="componentVariant"
+        >
+          <div ref="canvas" class="relative">
+            <button
+              v-if="hasCloseButton"
+              type="button"
+              :aria-label="$t.i19close"
+              @click.prevent="close"
+              class="absolute top-2"
+              :class="placement === 'end' ? 'left-2' : 'right-2'"
+              data-drawer-close
+            >
+              <slot name="close">
+                <i class="i-close text-base-400 text-3xl"></i>
+              </slot>
+            </button>
+            <slot />
+          </div>
+        </dialog>
+      </Fade>
+    </Teleport>
+  </div>
+</template>

package/packages/storefront/src/lib/components/PitchBar.vue

@@ -24,7 +24,7 @@ const countValidSlides = computed(() => {
 </script>
 
 <template>
-  <div data-pitch-bar class="bg-base-100">
+  <div class="bg-base-100" data-pitch-bar>
     <div class="container md:w-2/3 mx-auto px-3 py-1">
       <Carousel :autoplay="countValidSlides > 1 ? 7000 : null">
         <li v-for="(slide, i) in slides" :key="i">
@@ -32,6 +32,7 @@ const countValidSlides = computed(() => {
             :is="slide.href ? 'ALink' : 'span'"
             :href="slide.href"
             :target="slide.target"
+            class="inline-block px-8"
             :class="slide.href ? 'hover:underline' : null"
           >
             <slot name="slide" v-bind="{ slide, i, parsedContents }">
@@ -39,21 +40,25 @@ const countValidSlides = computed(() => {
                 v-if="parsedContents[i]"
                 v-html="parsedContents[i]"
                 class="prose text-sm text-base-800"
+                data-pitch-bar-slide
               ></span>
             </slot>
           </component>
         </li>
         <template #controls>
-          <div
-            v-show="countValidSlides > 1"
-            class="text-xl leading-none text-base-400"
-          >
-            <CarouselControl
-              :direction="-1"
-              class="pr-2 bg-base-100 hover:text-base-700"
-            />
-            <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
-          </div>
+          <slot name="controls" v-bind="{ countValidSlides }">
+            <div
+              v-show="countValidSlides > 1"
+              class="text-xl leading-none text-base-400"
+              data-pitch-bar-controls
+            >
+              <CarouselControl
+                :direction="-1"
+                class="pr-2 bg-base-100 hover:text-base-700"
+              />
+              <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
+            </div>
+          </slot>
         </template>
       </Carousel>
     </div>

package/packages/storefront/src/lib/components/Prices.vue

@@ -7,7 +7,7 @@ export interface Props {
   product?: Partial<Products> & { price: number, final_price?: number };
   price?: number;
   basePrice?: number;
-  isAmountTotal?: boolean,
+  isAmountTotal?: boolean;
   installmentsOption?: ListPaymentsResponse['installments_option'];
   discountOption?: ListPaymentsResponse['discount_option'];
   isBig?: boolean;
@@ -37,9 +37,9 @@ const componentVariant = useComponentVariant(props);
 </script>
 
 <template>
-  <div :data-prices="componentVariant" class="text-base-600">
+  <div class="text-base-600" :data-prices="componentVariant">
     <slot v-if="comparePrice" name="compare" v-bind="{ salePrice, comparePrice }">
-      <span data-prices-compare class="text-base-500 mr-1">
+      <span class="text-base-500 mr-1" data-prices-compare>
         <slot name="compare-pre">
           <small v-if="isLiteral">
             {{ `${$t.i19from} ` }}
@@ -56,7 +56,7 @@ const componentVariant = useComponentVariant(props);
       </span>
     </slot>
     <slot name="sale" v-bind="{ salePrice }">
-      <strong data-prices-sale class="inline-block text-base-800">
+      <strong class="inline-block text-base-800" data-prices-sale>
         <slot name="sale-pre">
           <small v-if="hasVariedPrices">
             {{ `${$t.i19asOf} ` }}
@@ -74,7 +74,7 @@ const componentVariant = useComponentVariant(props);
         name="cashback"
         v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
       >
-        <div v-if="hasCashback" data-prices-cashback class="relative z-10">
+        <div v-if="hasCashback" class="relative z-10" data-prices-cashback>
           <span :data-tooltip="$t.i19get$1back
             .replace('$1', $percentage(cashbackPercentage))">
             <slot name="cashback-pre">

package/packages/storefront/src/lib/components/ShopHeader.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { i19myAccount, i19openCart, i19searchProducts } from '@@i18n';
+import Drawer from '@@sf/components/Drawer.vue';
+import StickyHeader from '@@sf/components/StickyHeader.vue';
+
+const buttons = ref({
+  search: {
+    icon: 'i-search',
+    onClick: () => {},
+    label: i19searchProducts,
+  },
+  account: {
+    icon: 'i-account',
+    onClick: () => {},
+    label: i19myAccount,
+  },
+  cart: {
+    icon: 'i-shopping-cart',
+    onClick: () => {},
+    label: i19openCart,
+  },
+});
+const isSidenavOpen = ref(false);
+</script>
+
+<template>
+  <StickyHeader>
+    <div
+      class="container lg:max-w-7xl mx-auto px-1 lg:pl-3
+      grid grid-flow-col grid-cols-3 justify-between items-center
+      md:grid-cols-none md:auto-cols-max"
+      data-header
+    >
+      <slot name="sidenav-toggle">
+        <div class="md:hidden" data-sidenav-toggle>
+          <button
+            class="px-2 my-1"
+            :aria-label="$t.i19toggleMenu"
+            @click="isSidenavOpen = !isSidenavOpen"
+          >
+            <slot name="sidenav-toggle-content">
+              <i class="i-menu text-base-500 text-3xl"></i>
+            </slot>
+          </button>
+          <Drawer v-model="isSidenavOpen" class="-ml-1 lg:-ml-3">
+            MENU
+          </Drawer>
+        </div>
+      </slot>
+      <slot name="logo" />
+      <slot name="nav" />
+      <slot name="buttons">
+        <div
+          class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"
+          data-header-buttons
+        >
+          <slot
+            name="button"
+            v-for="({ icon, onClick, label }, name) in buttons"
+            :key="name"
+            v-bind="{ name, icon, onClick }"
+          >
+            <button
+              :class="name === 'account' ? 'hidden sm:block' : null"
+              :aria-label="label"
+              @click="onClick"
+              :data-header-button="name"
+            >
+              <slot name="button-content" v-bind="{ name, icon }">
+                <i
+                  :class="icon"
+                  class="hover:text-primary w-7 h-7 hover:scale-110 active:scale-125"
+                ></i>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </StickyHeader>
+</template>