cloudcommerce 0.26.7 → 0.28.0

package/packages/storefront/astro.config.mjs

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url';
 import { lstatSync, readFileSync } from 'node:fs';
-import { join as joinPath } from 'node:path';
+import { join as joinPath, relative as relativePath } from 'node:path';
 import * as dotenv from 'dotenv';
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
@@ -8,6 +8,7 @@ import vue from '@astrojs/vue';
 import image from '@astrojs/image';
 import UnoCSS from 'unocss/astro';
 import AstroPWA from '@vite-pwa/astro';
+import AutoImport from 'unplugin-auto-import/astro';
 import dictionaryDir from '@cloudcommerce/i18n/lib/dirname';
 import getConfig from './config/storefront.config.mjs';
 
@@ -18,6 +19,7 @@ const isSSG = process.env.BUILD_OUTPUT === 'static';
 const outDir = process.env.BUILD_OUT_DIR || (isSSG ? './dist/client' : './dist');
 const isToServerless = !isSSG && process.env.DEPLOY_RUNTIME === 'serverless';
 const deployRand = process.env.DEPLOY_RAND || '_';
+const isLibDev = !(relativePath(__dirname, process.cwd()));
 
 const {
   lang,
@@ -179,6 +181,27 @@ const genAstroConfig = ({
       injectEntry: false,
     }),
     AstroPWA(vitePWAOptions),
+    AutoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/, /\.vue\?vue/, // .vue
+        /\.mdx?$/, // .md, .mdx
+        /\.astro$/,
+      ],
+      imports: ['vue'],
+      dts: isLibDev ? '.auto-imports.d.ts' : false,
+    }),
+    {
+      name: 'client:context',
+      hooks: {
+        'astro:config:setup': ({ addClientDirective }) => {
+          addClientDirective({
+            name: 'context',
+            entrypoint: joinPath(__dirname, 'config/astro/context-directive.mjs'),
+          });
+        },
+      },
+    },
   ];
   if (!isToServerless) {
     integrations.push(image({

package/packages/storefront/client.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="./src/vue-globals" />
+/// <reference types="./.auto-imports" />
 
 type DocCleanupFields = 'body_html'
   | 'body_text'

package/packages/storefront/config/astro/context-directive.mjs

@@ -0,0 +1,21 @@
+/**
+ * Hydrate on context script executed (`$storefront.apiContext` ready)
+ * Check event emits at BaseHead.astro
+ * @type {import('astro').ClientDirective}
+ */
+export default (load) => {
+  const hy = async () => {
+    const hydrate = await load();
+    await hydrate();
+  };
+  const id = window.$storefront?.apiContext?.doc._id || null;
+  if (window._firstLoadContextId === id && window._emitedContextId === id) {
+    console.log('[ctx] first load');
+    hy();
+    setTimeout(() => {
+      delete window._firstLoadContextId;
+    }, 49);
+    return;
+  }
+  window.addEventListener('storefront:apiContext', hy, { once: true });
+};

package/packages/storefront/config/astro/index.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+import 'astro';
+
+declare module 'astro' {
+  interface AstroClientDirectives {
+    'client:context'?: boolean
+  }
+}

package/packages/storefront/config/storefront.cms.js

@@ -62,8 +62,8 @@ global.__storefrontCMS = (fs, resolvePath) => {
     settings = {};
   }
   const { domain } = settings;
-  const primaryColor = settings.primary_color || '#137c5c';
-  const secondaryColor = settings.secondary_color || primaryColor;
+  const primaryColor = settings.primaryColor || '#137c5c';
+  const secondaryColor = settings.secondaryColor || primaryColor;
 
   return {
     domain,

package/packages/storefront/config/storefront.tailwind.cjs

@@ -44,7 +44,6 @@ let defaultThemeOptions = {
   iconAliases: {
     close: 'x-mark',
     'chevron-right': 'chevron-right',
-    'chevron-left': 'chevron-left',
   },
 };
 if (globalThis.$storefrontThemeOptions) {

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.28.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -51,9 +51,10 @@
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
     "semver": "^7.5.4",
-    "sharp": "^0.32.5",
+    "sharp": "^0.32.6",
     "tailwindcss": "^3.3.3",
-    "unocss": "^0.55.7",
+    "unocss": "^0.56.4",
+    "unplugin-auto-import": "^0.16.6",
     "vite": "^4.4.9",
     "vite-plugin-pwa": "^0.16.5",
     "vue": "^3.3.4"

package/packages/storefront/server.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable vars-on-top, no-var */
+/// <reference types="./config/astro/index.d.ts" />
 
 import type { ApiEndpoint } from '@cloudcommerce/api';
 import type { RouteContext } from '@@sf/ssr-context';
@@ -8,7 +9,6 @@ declare global {
   namespace App {
     interface Locals {
       routeContext: RouteContext,
-      contextInlineClientJS?: string,
     }
   }
 

package/packages/storefront/src/lib/$storefront.d.ts

@@ -1,8 +1,8 @@
 import type {
-  ProductSet,
-  CategorySet,
-  BrandSet,
-  CollectionSet,
+  Products,
+  Categories,
+  Brands,
+  Collections,
 } from '@cloudcommerce/api/types';
 import type { SettingsContent } from '@@sf/content';
 
@@ -10,19 +10,19 @@ export type $Storefront = {
   settings: Partial<SettingsContent>,
   apiContext?: {
     resource: 'products',
-    doc: ProductSet,
+    doc: Products,
     timestamp: number,
   } | {
     resource: 'categories',
-    doc: CategorySet,
+    doc: Categories,
     timestamp: number,
   } | {
     resource: 'brands',
-    doc: BrandSet,
+    doc: Brands,
     timestamp: number,
   } | {
     resource: 'collections',
-    doc: CollectionSet,
+    doc: Collections,
     timestamp: number,
   },
   data: Record<string, any>,

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

@@ -118,3 +118,8 @@ https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-b
 .h-screen {
   max-height: 100dvh;
 }
+
+/* Hardfix for multiple <Teleport> backdrops with View Transitions "SPA" */
+[data-drawer-backdrop] + [data-drawer-backdrop] {
+  display: none;
+}

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" 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,7 +74,7 @@ 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' : 'max-h-screen')}` : 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

@@ -4,7 +4,7 @@ import { computed } from 'vue';
 
 export interface Props {
   as?: string;
-  flag: Exclude<SettingsContent['payment_methods'], undefined>[number];
+  flag: Exclude<SettingsContent['paymentMethods'], undefined>[number];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -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"