cloudcommerce 0.26.7 → 0.27.0

package/packages/firebase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/firebase",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "description": "E-Com Plus Cloud Commerce on Firebase",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -32,7 +32,7 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@google-cloud/pubsub": "^4.0.6",
-    "firebase-admin": "^11.10.1",
+    "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.4.1",
     "source-map-support": "^0.5.21"
   },

package/packages/i18n/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/i18n",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "description": "E-Com Plus Cloud Commerce i18n",
   "main": "lib/all.js",
   "exports": {

package/packages/modules/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/modules",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "description": "E-Com Plus Cloud Commerce modules API",
   "main": "lib/index.cjs",
   "exports": {
@@ -45,8 +45,8 @@
     "@ecomplus/utils": "1.5.0-rc.5",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "axios": "^1.5.0",
-    "firebase-admin": "^11.10.1",
+    "axios": "^1.5.1",
+    "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.4.1",
     "source-map-support": "^0.5.21"
   },

package/packages/passport/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/passport",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "description": "E-Com Plus Cloud Commerce customers authentication (passport) API",
   "main": "lib/index.js",
   "exports": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
-    "firebase-admin": "^11.10.1",
+    "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.4.1",
     "source-map-support": "^0.5.21"
   },

package/packages/ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/ssr",
   "type": "module",
-  "version": "0.26.7",
+  "version": "0.27.0",
   "description": "E-Com Plus Cloud Commerce storefront SSR",
   "main": "lib/index.js",
   "exports": {
@@ -33,13 +33,13 @@
     "@vueuse/core": "10.4.1",
     "astro": "2.10.15",
     "astro-capo": "^0.0.1",
-    "firebase-admin": "^11.10.1",
+    "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.4.1",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@cloudcommerce/types": "workspace:*",
-    "@cloudflare/workers-types": "^4.20230914.0",
+    "@cloudflare/workers-types": "^4.20230922.0",
     "@firebase/app-types": "^0.9.0"
   }
 }

package/packages/storefront/.auto-imports.d.ts

@@ -0,0 +1,65 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+}

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.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.27.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>