cloudcommerce 0.26.6 → 0.27.0

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

@@ -11,14 +11,19 @@ import {
   nextTick,
   provide,
 } from 'vue';
-import { useDebounceFn, useElementHover, useScroll } from '@vueuse/core';
+import {
+  useDebounceFn,
+  useElementHover,
+  useScroll,
+} from '@vueuse/core';
 import CarouselControl from '@@sf/components/CarouselControl.vue';
 
 export type CarouselInject = {
   autoplay: Ref<number | undefined>,
-  changeSlide: (direction: number, isPageScroll?: boolean) => void,
-  isBoundLeft: Ref<boolean>,
-  isBoundRight: Ref<boolean>,
+  axis: 'x' | 'y',
+  changeSlide: (step: number, isPageScroll?: boolean) => void,
+  isBoundStart: Ref<boolean>,
+  isBoundEnd: Ref<boolean>,
 };
 
 export const carouselKey = Symbol('carousel') as InjectionKey<CarouselInject>;
@@ -28,78 +33,82 @@ export const carouselKey = Symbol('carousel') as InjectionKey<CarouselInject>;
 /* REFERENCE: https://github.com/bartdominiak/vue-snap */
 export interface Props {
   as?: string;
-  modelValue?: number;
+  index?: number;
   autoplay?: number; // milliseconds
+  axis?: 'x' | 'y';
+  hasControls?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   as: 'ul',
-  modelValue: 1,
+  index: 0,
+  axis: 'x',
 });
-const emit = defineEmits([
-  'update:modelValue',
-]);
-const currentIndex = ref(0);
-watch(toRef(props, 'modelValue'), (modelValue) => {
-  currentIndex.value = modelValue - 1;
+const emit = defineEmits(['update:index']);
+const activeIndex = ref(0);
+watch(toRef(props, 'index'), (index) => {
+  if (index !== activeIndex.value) {
+    const step = index - activeIndex.value;
+    changeSlide(step, false);
+  }
 }, { immediate: true });
-watch(currentIndex, (current, previous) => {
+watch(activeIndex, (current, previous) => {
   if (current !== previous) {
-    emit('update:modelValue', current + 1);
+    emit('update:index', current);
   }
 });
 const wrapper = ref<HTMLElement | null>(null);
-const { x: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
-const isBoundLeft = computed(() => arrivedState.left);
-const isBoundRight = computed(() => arrivedState.right);
-const slidesWidth = ref<{ offsetLeft: number; width: number; }[]>([]);
-const wrapperScrollWidth = ref(0);
-const wrapperVisibleWidth = ref(0);
-const indexCount = ref(0);
-const calcWrapperWidth = () => {
+const { [props.axis]: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
+const isX = props.axis === 'x';
+const isBoundStart = computed(() => (isX ? arrivedState.left : arrivedState.top));
+const isBoundEnd = computed(() => (isX ? arrivedState.right : arrivedState.bottom));
+const slideSizes = ref<{ offset: number; size: number; }[]>([]);
+const wrapperScrollSize = ref(0);
+const wrapperVisibleSize = ref(0);
+const calcWrapperSize = () => {
   if (!wrapper.value) return;
-  wrapperScrollWidth.value = wrapper.value.scrollWidth;
-  wrapperVisibleWidth.value = wrapper.value.offsetWidth;
+  if (isX) {
+    wrapperScrollSize.value = wrapper.value.scrollWidth;
+    wrapperVisibleSize.value = wrapper.value.offsetWidth;
+  } else {
+    wrapperScrollSize.value = wrapper.value.scrollHeight;
+    wrapperVisibleSize.value = wrapper.value.offsetHeight;
+  }
 };
-const calcSlidesWidth = () => {
+const calcSlidesSize = () => {
   if (!wrapper.value) return;
   let childNodes = [...wrapper.value.children] as HTMLElement[];
   if (childNodes.length === 1 && childNodes[0].tagName.endsWith('SLOT')) {
     childNodes = [...childNodes[0].children] as HTMLElement[];
   }
-  slidesWidth.value = childNodes.map((node) => ({
-    offsetLeft: node.offsetLeft,
-    width: node.offsetWidth,
+  slideSizes.value = childNodes.map((node) => ({
+    offset: isX ? node.offsetLeft : node.offsetTop,
+    size: isX ? node.offsetWidth : node.offsetHeight,
   }));
 };
-const calcNextOffsetLeft = (direction: number) => {
-  let nextSlideIndex = currentIndex.value + direction;
-  if (nextSlideIndex >= slidesWidth.value.length) {
+const calcNextOffset = (step: number) => {
+  let nextSlideIndex = activeIndex.value + step;
+  if (nextSlideIndex >= slideSizes.value.length) {
     return 0;
   }
   if (nextSlideIndex < 0) {
-    nextSlideIndex = slidesWidth.value.length + nextSlideIndex;
+    nextSlideIndex = slideSizes.value.length + nextSlideIndex;
   }
-  const { offsetLeft, width } = slidesWidth.value[nextSlideIndex] || {};
-  if (!width) {
+  const { offset, size } = slideSizes.value[nextSlideIndex] || {};
+  if (!size) {
     return 0;
   }
-  return offsetLeft;
+  return offset;
 };
 const calcCurrentIndex = () => {
-  const getCurrentIndex = slidesWidth.value.findIndex((slide) => {
+  const index = slideSizes.value.findIndex((slide) => {
     // Find the closest point, with 5px approximate.
-    return Math.abs(slide.offsetLeft - currentPos.value) <= 5;
+    return Math.abs(slide.offset - currentPos.value) <= 5;
   });
-  if (getCurrentIndex > -1) {
-    currentIndex.value = getCurrentIndex || 0;
+  if (index > -1) {
+    activeIndex.value = index || 0;
   }
 };
-const calcIndexCount = () => {
-  const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
-  indexCount.value = slidesWidth.value
-    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos - 5));
-};
 let autoplayTimer: ReturnType<typeof setTimeout> | undefined;
 const restartAutoplay = () => {
   if (props.autoplay) {
@@ -110,29 +119,32 @@ const restartAutoplay = () => {
     }, props.autoplay);
   }
 };
-const changeSlide = (direction: number, isPageScroll: boolean = true) => {
-  if (slidesWidth.value.length < 2) {
+const changeSlide = (step: number, isPageScroll: boolean = true) => {
+  if (slideSizes.value.length < 2) {
     return;
   }
-  if (isPageScroll && (direction === 1 || direction === -1)) {
+  if (isPageScroll && (step === 1 || step === -1)) {
     let pageStep = 0;
-    let pageStepWidth = 0;
-    for (let i = currentIndex.value; i < slidesWidth.value.length; i++) {
-      const { width } = slidesWidth.value[i] || {};
-      if (width) {
+    let pageStepSize = 0;
+    for (let i = activeIndex.value; i < slideSizes.value.length; i++) {
+      const { size } = slideSizes.value[i] || {};
+      if (size) {
         pageStep += 1;
-        pageStepWidth += width;
-        if (pageStepWidth >= wrapperVisibleWidth.value) {
+        pageStepSize += size;
+        if (pageStepSize >= wrapperVisibleSize.value) {
           break;
         }
       }
     }
     if (pageStep) {
-      direction = direction > 0 ? pageStep : -pageStep;
+      step = step > 0 ? pageStep : -pageStep;
     }
   }
-  const nextOffsetLeft = calcNextOffsetLeft(direction);
-  wrapper.value?.scrollTo({ left: nextOffsetLeft, behavior: 'smooth' });
+  const nextOffset = calcNextOffset(step);
+  wrapper.value?.scrollTo({
+    [isX ? 'left' : 'top']: nextOffset,
+    behavior: 'smooth',
+  });
   restartAutoplay();
 };
 watch(isScrolling, (_isScrolling: boolean) => {
@@ -156,14 +168,17 @@ const calcOnInit = () => {
   if (!wrapper.value) {
     return;
   }
-  calcWrapperWidth();
-  calcSlidesWidth();
+  calcWrapperSize();
+  calcSlidesSize();
   calcCurrentIndex();
-  calcIndexCount();
 };
 const onResize = useDebounceFn(() => {
   if (!wrapper.value) return;
-  wrapper.value.scrollLeft = 0;
+  if (isX) {
+    wrapper.value.scrollLeft = 0;
+  } else {
+    wrapper.value.scrollTop = 0;
+  }
   calcOnInit();
 }, 400);
 onMounted(() => {
@@ -187,20 +202,27 @@ onBeforeUnmount(() => {
 });
 provide(carouselKey, {
   autoplay: toRef(props, 'autoplay'),
+  axis: props.axis,
   changeSlide,
-  isBoundLeft,
-  isBoundRight,
+  isBoundStart,
+  isBoundEnd,
 });
 </script>
 
 <template>
-  <div ref="carousel" class="relative" data-carousel>
+  <div
+    ref="carousel"
+    :class="`relative ${(!isX ? 'overflow-hidden' : '')}`"
+    data-carousel
+  >
     <component
       :is="as"
       ref="wrapper"
-      class="flex overflow-x-scroll overflow-y-hidden list-none m-0 p-0
-        snap-x snap-mandatory scroll-smooth
-        [&>*]:snap-start [&>*]:outline-none"
+      class="m-0 flex snap-mandatory list-none scroll-smooth p-0
+      [&>*]:snap-start [&>*]:outline-none"
+      :class="isX
+        ? 'snap-x overflow-y-hidden overflow-x-scroll'
+        : 'h-full flex-col snap-y overflow-x-hidden overflow-y-scroll'"
       style="
         scrollbar-width: none;
         -webkit-overflow-scrolling: touch;
@@ -214,16 +236,15 @@ provide(carouselKey, {
       name="controls"
       v-bind="{
         changeSlide,
-        isBoundLeft,
-        isBoundRight,
-        currentPage: currentIndex + 1,
-        pageCount: indexCount + 1,
+        isBoundStart,
+        isBoundEnd,
+        activeIndex,
       }"
     >
-      <CarouselControl is-prev>
+      <CarouselControl v-if="slideSizes.length > 1 || hasControls" is-prev>
         <slot name="previous" />
       </CarouselControl>
-      <CarouselControl>
+      <CarouselControl v-if="slideSizes.length > 1 || hasControls">
         <slot name="next" />
       </CarouselControl>
     </slot>

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

@@ -9,7 +9,8 @@ export interface Props {
 withDefaults(defineProps<Props>(), {
   isPrev: false,
 });
-const { changeSlide } = inject(carouselKey) as CarouselInject;
+const { axis, changeSlide } = inject(carouselKey) as CarouselInject;
+const isX = axis === 'x';
 </script>
 
 <template>
@@ -17,16 +18,21 @@ const { changeSlide } = inject(carouselKey) as CarouselInject;
     type="button"
     :aria-label="!isPrev ? $t.i19next : $t.i19previous"
     @click="changeSlide(!isPrev ? 1 : -1)"
-    class="group absolute top-0 z-1"
-    :class="!isPrev ? 'right-0' : 'left-0'"
+    class="z-1 group absolute"
+    :class="isX
+      ? `${(!isPrev ? 'right-0' : 'left-0')} top-0`
+      : `${(!isPrev ? 'bottom-0' : 'top-0')} left-0`"
     :data-carousel-control="!isPrev ? 'next' : 'previous'"
   >
     <slot>
       <i
-        class="m-0"
-        :class="!isPrev
-          ? 'i-chevron-right group-active:translate-x-1'
-          : 'i-chevron-left group-active:-translate-x-1'"
+        class="i-chevron-right m-0"
+        :class="{
+          'group-active:translate-x-1': isX && !isPrev,
+          'rotate-180 group-active:-translate-x-1': isX && isPrev,
+          'rotate-90 group-active:translate-y-1': !isX && !isPrev,
+          '-rotate-90 group-active:-translate-y-1': !isX && isPrev,
+        }"
       ></i>
     </slot>
   </button>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+export interface Props {
+  html: string;
+}
+
+const { html } = defineProps<Props>();
+const parsedHTML = html.replace(/<(img|iframe) /g, '<$1 loading="lazy" ');
+</script>
+
+<template>
+  <article class="prose !max-w-full overflow-x-auto lg:overflow-x-hidden" v-once>
+    <div
+      class="[&_iframe]:max-w-full [&_img]:max-w-full [&_table]:max-w-full"
+      v-html="parsedHTML"
+    ></div>
+  </article>
+</template>

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

@@ -74,10 +74,10 @@ const isPlacementX = computed(() => {
     <dialog
       v-if="modelValue"
       ref="drawer"
-      class="w-screen shadow p-0 m-0 z-50"
+      class="z-50 m-0 w-screen p-0 shadow"
       :class="[
         position,
-        isFixed ? `top-0 ${(isPlacementX ? 'h-screen' : '')}` : null,
+        isFixed ? `top-0 ${(isPlacementX ? 'h-screen' : 'max-h-screen')}` : null,
         isFixed && placement !== 'end' ? 'left-0' : null,
         isFixed && placement === 'end' ? 'left-auto right-0' : null,
         isPlacementX ? 'max-w-sm' : null,
@@ -108,7 +108,7 @@ const isPlacementX = computed(() => {
         <Fade>
           <div
             v-if="modelValue"
-            class="fixed top-0 left-0 w-screen h-screen bg-black/50 z-40"
+            class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50"
             data-drawer-backdrop
           ></div>
         </Fade>

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

@@ -28,7 +28,7 @@ const iconClassName = computed(() => {
 <template>
   <b
     v-if="!iconClassName"
-    class="tracking-tighter leading-none mb-1 text-black text-[57%]"
+    class="mb-1 text-[57%] leading-none tracking-tighter text-black"
   >
     {{ props.flag }}
   </b>

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

@@ -86,10 +86,10 @@ provide(quantitySelectorKey, {
         :step="step"
         :disabled="disabled"
         :readonly="readonly"
-        class="h-12 w-14 px-2 text-lg border-transparent text-center
-        [-moz-appearance:_textfield] [&::-webkit-outer-spin-button]:m-0
-        [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0
-        [&::-webkit-inner-spin-button]:appearance-none"
+        class="h-12 w-14 border-transparent px-2 text-center text-lg
+        [-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0
+        [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0
+        [&::-webkit-outer-spin-button]:appearance-none"
       />
       <slot
         name="controls"

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

@@ -20,8 +20,8 @@ const {
 <template>
   <button
     type="button"
-    class="w-10 h-12 text-xl leading-12 enabled:text-primary
-    enabled:hover:bg-primary-100/70 disabled:opacity-40"
+    class="leading-12 enabled:text-primary enabled:hover:bg-primary-100/70
+    h-12 w-10 text-xl disabled:opacity-40"
     :data-quantity-selector-control="isMinus ? 'minus' : 'plus'"
     :aria-label="isMinus ? $t.i19minus : $t.i19plus"
     :disabled="isMinus ? isBoundMin : isBoundMax"