refactor: reorganize CSS variables and improve component structure for Pagination

Author: ismail9k

src/components/Pagination/Pagination.css

@@ -1,45 +1,45 @@
 :root {
-  --vc-pgn-width: 16px;
+  --vc-pgn-active-color: var(--vc-clr-primary);
+  --vc-pgn-background-color: var(--vc-clr-secondary);
+  --vc-pgn-border-radius: 0;
   --vc-pgn-height: 4px;
   --vc-pgn-margin: 6px 5px;
-  --vc-pgn-border-radius: 0;
-  --vc-pgn-background-color: var(--vc-clr-secondary);
-  --vc-pgn-active-color: var(--vc-clr-primary);
+  --vc-pgn-width: 16px;
 }
 
 .carousel__pagination {
+  bottom: 5px;
   display: flex;
   justify-content: center;
-  list-style: none !important;
+  left: 50%;
   line-height: 0;
-  padding: 0 !important;
+  list-style: none !important;
   margin: 0 !important;
+  padding: 0 !important;
   position: absolute;
-  bottom: 5px;
-  left: 50%;
   transform: translateX(-50%);
 }
 
 .carousel__pagination-button {
-  display: block;
+  background: transparent;
   border: 0;
-  margin: 0;
   cursor: pointer;
+  display: block;
+  margin: 0;
   padding: var(--vc-pgn-margin);
-  background: transparent;
+}
+
+.carousel__pagination-button--active::after {
+  background-color: var(--vc-pgn-active-color);
 }
 
 .carousel__pagination-button::after {
-  display: block;
+  background-color: var(--vc-pgn-background-color);
+  border-radius: var(--vc-pgn-border-radius);
   content: '';
-  width: var(--vc-pgn-width);
+  display: block;
   height: var(--vc-pgn-height);
-  border-radius: var(--vc-pgn-border-radius);
-  background-color: var(--vc-pgn-background-color);
-}
-
-.carousel__pagination-button--active::after {
-  background-color: var(--vc-pgn-active-color);
+  width: var(--vc-pgn-width);
 }
 
 @media (hover: hover) {
@@ -48,18 +48,17 @@
   }
 }
 
-
 .carousel.is-vertical {
   .carousel__pagination {
+    bottom: 50%;
+    flex-direction: column;
     left: auto;
     right: 5px;
-    bottom: 50%;
     transform: translateY(50%);
-    flex-direction: column;
   }
 
   .carousel__pagination-button::after {
     height: var(--vc-pgn-width);
     width: var(--vc-pgn-height);
   }
-}
+}

src/components/Pagination/Pagination.ts

@@ -1,7 +1,7 @@
-import { inject, h, VNode, defineComponent, computed } from 'vue'
+import { computed, defineComponent, h, inject, VNode } from 'vue'
 
 import { injectCarousel } from '@/shared'
-import { mapNumberToRange, i18nFormatter, getSnapAlignOffset } from '@/utils'
+import { getSnapAlignOffset, i18nFormatter, mapNumberToRange } from '@/utils'
 
 import { PaginationProps } from './Pagination.types'
 

src/components/Pagination/Pagination.types.ts

@@ -1,4 +1,4 @@
-export interface PaginationProps {
+export type PaginationProps = {
   disableOnClick?: boolean
   paginateByItemsToShow?: boolean
 }