refactor: reorganize CSS properties and improve component structure for better clarity and maintainability

Author: ismail9k

src/components/Navigation/Navigation.css

@@ -1,32 +1,32 @@
 :root {
-  --vc-nav-width: 30px;
-  --vc-nav-height: 30px;
+  --vc-nav-background: transparent;
   --vc-nav-border-radius: 0;
   --vc-nav-color: var(--vc-clr-primary);
   --vc-nav-color-hover: var(--vc-clr-secondary);
-  --vc-nav-background: transparent;
+  --vc-nav-height: 30px;
+  --vc-nav-width: 30px;
 }
 
-.carousel__prev,
-.carousel__next {
-  box-sizing: content-box;
+.carousel__next,
+.carousel__prev {
+  align-items: center;
   background: var(--vc-nav-background);
+  border: 0;
   border-radius: var(--vc-nav-border-radius);
-  width: var(--vc-nav-width);
-  height: var(--vc-nav-height);
-  text-align: center;
-  font-size: var(--vc-nav-height);
-  padding: 0;
+  box-sizing: content-box;
   color: var(--vc-nav-color);
+  cursor: pointer;
   display: flex;
+  font-size: var(--vc-nav-height);
+  height: var(--vc-nav-height);
   justify-content: center;
-  align-items: center;
-  position: absolute;
-  border: 0;
-  cursor: pointer;
   margin: 0 10px;
+  padding: 0;
+  position: absolute;
+  text-align: center;
   top: 50%;
   transform: translateY(-50%);
+  width: var(--vc-nav-width);
 }
 
 .carousel__next--disabled,
@@ -35,57 +35,57 @@
   opacity: 0.5;
 }
 
+.carousel__next {
+  right: 0;
+}
+
 .carousel__prev {
   left: 0;
 }
 
-.carousel__next {
-  right: 0;
+.carousel.is-btt {
+  .carousel__next {
+    top: 0;
+  }
+  .carousel__prev {
+    bottom: 0;
+  }
 }
 
 .carousel.is-rtl {
-  .carousel__prev {
-    left: auto;
-    right: 0;
-  }
   .carousel__next {
-    right: auto;
     left: 0;
+    right: auto;
   }
-}
-
-.carousel.is-vertical {
-  .carousel__prev,
-  .carousel__next {
+  .carousel__prev {
     left: auto;
-    top: auto;
-    right: 50%;
-    transform: translate(50%);
-    margin: 5px auto;
+    right: 0;
   }
 }
 
-.carousel.is-btt {
-  .carousel__prev {
+.carousel.is-ttb {
+  .carousel__next {
     bottom: 0;
   }
-  .carousel__next {
+  .carousel__prev {
     top: 0;
   }
 }
 
-.carousel.is-ttb {
+.carousel.is-vertical {
+  .carousel__next,
   .carousel__prev {
-    top: 0;
-  }
-  .carousel__next {
-    bottom: 0;
+    left: auto;
+    margin: 5px auto;
+    right: 50%;
+    top: auto;
+    transform: translate(50%);
   }
 }
 
 @media (hover: hover) {
-  .carousel__prev:hover,
-  .carousel__next:hover {
+  .carousel__next:hover,
+  .carousel__prev:hover {
     color: var(--vc-nav-color-hover);
   }
 }

src/components/Navigation/Navigation.ts

@@ -1,6 +1,6 @@
-import { inject, h, defineComponent, computed } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
 
-import { NormalizedDir, injectCarousel } from '@/shared'
+import { injectCarousel, NormalizedDir } from '@/shared'
 
 import { Icon, IconNameValue } from '../Icon'
 
@@ -18,27 +18,31 @@ export const Navigation = defineComponent<NavigationProps>({
 
     const getPrevIcon = () => {
       const directionIcons: Record<NormalizedDir, IconNameValue> = {
+        btt: 'arrowDown',
         ltr: 'arrowLeft',
         rtl: 'arrowRight',
         ttb: 'arrowUp',
-        btt: 'arrowDown',
       }
 
       return directionIcons[carousel.normalizedDir]
     }
     const getNextIcon = () => {
       const directionIcons: Record<NormalizedDir, IconNameValue> = {
+        btt: 'arrowUp',
         ltr: 'arrowRight',
         rtl: 'arrowLeft',
         ttb: 'arrowDown',
-        btt: 'arrowUp',
       }
 
       return directionIcons[carousel.normalizedDir]
     }
 
-    const prevDisabled = computed(() => !carousel.config.wrapAround && carousel.currentSlide <= carousel.minSlide)
-    const nextDisabled = computed(() => !carousel.config.wrapAround && carousel.currentSlide >= carousel.maxSlide)
+    const prevDisabled = computed(
+      () => !carousel.config.wrapAround && carousel.currentSlide <= carousel.minSlide
+    )
+    const nextDisabled = computed(
+      () => !carousel.config.wrapAround && carousel.currentSlide >= carousel.maxSlide
+    )
 
     return () => {
       const { i18n } = carousel.config
@@ -53,7 +57,7 @@ export const Navigation = defineComponent<NavigationProps>({
           ...attrs,
           class: [
             'carousel__prev',
-            {'carousel__prev--disabled': prevDisabled.value},
+            { 'carousel__prev--disabled': prevDisabled.value },
             attrs.class,
           ],
         },
@@ -70,7 +74,7 @@ export const Navigation = defineComponent<NavigationProps>({
           ...attrs,
           class: [
             'carousel__next',
-            {'carousel__next--disabled': nextDisabled.value},
+            { 'carousel__next--disabled': nextDisabled.value },
             attrs.class,
           ],
         },