refactor: enhance carousel properties validation and update styles for active slides

Author: ismail9k

playground/App.vue

@@ -498,7 +498,7 @@ select {
 }
 
 .carousel__slide--active .carousel-item {
-  border: 2px solid red;
+  box-shadow: inset 0 0 0 2px red;
 }
 .config-panel-buttons-row {
   display: flex;

src/components/Carousel/Carousel.ts

@@ -108,14 +108,6 @@ export const Carousel = defineComponent({
 
     const dimension = computed(() => (isVertical.value ? 'height' : 'width'))
 
-    watchEffect(() => {
-      if (isVertical.value && config.height === 'auto') {
-        console.warn(
-          '[Vue3-Carousel] To use vertical carousel mode, please provide a fixed height in the config.'
-        )
-      }
-    })
-
     function updateBreakpointsConfig(): void {
       if (!mounted.value) {
         return

src/components/Carousel/carouselProps.ts

@@ -3,6 +3,7 @@ import { PropType } from 'vue'
 import {
   BREAKPOINT_MODE_OPTIONS,
   DEFAULT_CONFIG,
+  DIR_MAP,
   DIR_OPTIONS,
   SLIDE_EFFECTS,
   SNAP_ALIGN_OPTIONS,
@@ -14,6 +15,8 @@ import type {
   SnapAlign,
   CarouselConfig,
   SlideEffect,
+  NonNormalizedDir,
+  NormalizedDir,
 } from '@/shared'
 
 export const carouselProps = {
@@ -100,9 +103,23 @@ export const carouselProps = {
   dir: {
     type: String as PropType<Dir>,
     default: DEFAULT_CONFIG.dir,
-    validator(value: Dir) {
+    validator(value: Dir, props: { height?: string }) {
       // The value must match one of these strings
-      return DIR_OPTIONS.includes(value)
+      if (!DIR_OPTIONS.includes(value)) {
+        return false
+      }
+
+      const normalizedDir =
+        value in DIR_MAP ? DIR_MAP[value as NonNormalizedDir] : (value as NormalizedDir)
+      if (
+        ['ttb', 'btt'].includes(normalizedDir) &&
+        (!props.height || props.height === 'auto')
+      ) {
+        console.warn(
+          `[vue3-carousel warn]: The dir "${value}" is not supported with height "auto".`
+        )
+      }
+      return true
     },
   },
   // aria-labels and additional text labels
@@ -125,13 +142,13 @@ export const carouselProps = {
     default: false,
     type: Boolean,
     validator(value: boolean, props: { wrapAround?: boolean }) {
-      if (value && props.wrapAround)
-        console.warn( /* eslint-disable-line no-console */
-          '[vue3-carousel warn]: preventExcessiveDragging cannot be used with wrapAround. ' +
-          'The preventExcessiveDragging setting will be ignored.'
-        );
+      if (value && props.wrapAround) {
+        console.warn(
+          `[vue3-carousel warn]: "preventExcessiveDragging" cannot be used with wrapAround. The setting will be ignored.`
+        )
+      }
 
-      return true;
-    }
-  }
+      return true
+    },
+  },
 }

src/shared/constants.ts

@@ -61,5 +61,5 @@ export const DEFAULT_CONFIG: CarouselConfig = {
   i18n: I18N_DEFAULT_CONFIG,
   ignoreAnimations: false,
   slideEffect: SLIDE_EFFECTS[0],
-  preventExcessiveDragging: false
+  preventExcessiveDragging: false,
 }