refactor: reorganize constants and types for improved clarity and maintainability

Author: ismail9k

src/shared/constants.ts

@@ -1,14 +1,14 @@
 import { CarouselConfig } from './types'
 
-export const SNAP_ALIGN_OPTIONS = [
-  'center',
-  'start',
-  'end',
-  'center-even',
-  'center-odd',
-] as const
-export const SLIDE_EFFECTS = ['slide', 'fade'] as const
 export const BREAKPOINT_MODE_OPTIONS = ['viewport', 'carousel'] as const
+
+export const DIR_MAP = {
+  'bottom-to-top': 'btt',
+  'left-to-right': 'ltr',
+  'right-to-left': 'rtl',
+  'top-to-bottom': 'ttb',
+} as const
+
 export const DIR_OPTIONS = [
   'ltr',
   'left-to-right',
@@ -19,47 +19,51 @@ export const DIR_OPTIONS = [
   'btt',
   'bottom-to-top',
 ] as const
+
 export const I18N_DEFAULT_CONFIG = {
+  ariaGallery: 'Gallery',
+  ariaNavigateToPage: 'Navigate to page {slideNumber}',
+  ariaNavigateToSlide: 'Navigate to slide {slideNumber}',
   ariaNextSlide: 'Navigate to next slide',
   ariaPreviousSlide: 'Navigate to previous slide',
-  ariaNavigateToSlide: 'Navigate to slide {slideNumber}',
-  ariaNavigateToPage: 'Navigate to page {slideNumber}',
-  ariaGallery: 'Gallery',
-  itemXofY: 'Item {currentSlide} of {slidesCount}',
-  iconArrowUp: 'Arrow pointing upwards',
   iconArrowDown: 'Arrow pointing downwards',
-  iconArrowRight: 'Arrow pointing to the right',
   iconArrowLeft: 'Arrow pointing to the left',
-} as const
-
-export const DIR_MAP = {
-  'left-to-right': 'ltr',
-  'right-to-left': 'rtl',
-  'top-to-bottom': 'ttb',
-  'bottom-to-top': 'btt',
+  iconArrowRight: 'Arrow pointing to the right',
+  iconArrowUp: 'Arrow pointing upwards',
+  itemXofY: 'Item {currentSlide} of {slidesCount}',
 } as const
 
 export const NORMALIZED_DIR_OPTIONS = Object.values(DIR_MAP)
 
+export const SLIDE_EFFECTS = ['slide', 'fade'] as const
+
+export const SNAP_ALIGN_OPTIONS = [
+  'center',
+  'start',
+  'end',
+  'center-even',
+  'center-odd',
+] as const
+
 export const DEFAULT_CONFIG: CarouselConfig = {
-  enabled: true,
-  itemsToShow: 1,
-  itemsToScroll: 1,
-  modelValue: 0,
-  transition: 300,
   autoplay: 0,
-  gap: 0,
-  height: 'auto',
-  wrapAround: false,
-  pauseAutoplayOnHover: false,
-  mouseDrag: true,
-  touchDrag: true,
-  snapAlign: SNAP_ALIGN_OPTIONS[0],
-  dir: DIR_OPTIONS[0],
   breakpointMode: BREAKPOINT_MODE_OPTIONS[0],
   breakpoints: undefined,
+  dir: DIR_OPTIONS[0],
+  enabled: true,
+  gap: 0,
+  height: 'auto',
   i18n: I18N_DEFAULT_CONFIG,
   ignoreAnimations: false,
-  slideEffect: SLIDE_EFFECTS[0],
+  itemsToScroll: 1,
+  itemsToShow: 1,
+  modelValue: 0,
+  mouseDrag: true,
+  pauseAutoplayOnHover: false,
   preventExcessiveDragging: false,
+  slideEffect: SLIDE_EFFECTS[0],
+  snapAlign: SNAP_ALIGN_OPTIONS[0],
+  touchDrag: true,
+  transition: 300,
+  wrapAround: false,
 }

src/shared/index.ts

@@ -1,4 +1,4 @@
-export * from './injectSymbols'
 export * from './constants'
-export * from './types'
+export * from './injectSymbols'
 export * from './slideRegistry'
+export * from './types'

src/shared/slideRegistry.ts

@@ -16,6 +16,12 @@ const createSlideRegistry = (emit: EmitFn) => {
   }
 
   return {
+    cleanup: () => {
+      slides.splice(0, slides.length)
+    },
+
+    getSlides: () => slides,
+
     registerSlide: (slide: ComponentInternalInstance, index?: number) => {
       if (!slide) return
 
@@ -38,12 +44,6 @@ const createSlideRegistry = (emit: EmitFn) => {
       slides.splice(slideIndex, 1)
       updateSlideIndexes(slideIndex)
     },
-
-    cleanup: () => {
-      slides.splice(0, slides.length)
-    },
-
-    getSlides: () => slides,
   }
 }
 

src/shared/types.ts

@@ -1,53 +1,54 @@
 import {
   BREAKPOINT_MODE_OPTIONS,
+  DIR_MAP,
   DIR_OPTIONS,
-  SNAP_ALIGN_OPTIONS,
   I18N_DEFAULT_CONFIG,
   NORMALIZED_DIR_OPTIONS,
-  DIR_MAP,
   SLIDE_EFFECTS,
+  SNAP_ALIGN_OPTIONS,
 } from './constants'
 
+export type BreakpointMode = (typeof BREAKPOINT_MODE_OPTIONS)[number]
+
 export type Breakpoints = {
   [key: number]: Partial<
     Omit<CarouselConfig, 'breakpoints' | 'modelValue' | 'breakpointMode'>
   >
 }
 
-export type SlideEffect = (typeof SLIDE_EFFECTS)[number]
-export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number]
-
 export type Dir = (typeof DIR_OPTIONS)[number]
 
-export type BreakpointMode = (typeof BREAKPOINT_MODE_OPTIONS)[number]
+export type I18nKeys = keyof typeof I18N_DEFAULT_CONFIG
+
+export type NonNormalizedDir = keyof typeof DIR_MAP
 
 export type NormalizedDir = (typeof NORMALIZED_DIR_OPTIONS)[number]
 
-export type NonNormalizedDir = keyof typeof DIR_MAP
+export type SlideEffect = (typeof SLIDE_EFFECTS)[number]
 
-export type I18nKeys = keyof typeof I18N_DEFAULT_CONFIG
+export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number]
 
 export interface CarouselConfig {
-  enabled: boolean
-  itemsToShow: number | 'auto'
-  itemsToScroll: number
-  modelValue?: number
-  transition?: number
-  gap: number
   autoplay?: number
-  snapAlign: SnapAlign
-  wrapAround?: boolean
-  pauseAutoplayOnHover?: boolean
-  mouseDrag?: boolean
-  touchDrag?: boolean
-  dir?: Dir
   breakpointMode?: BreakpointMode
   breakpoints?: Breakpoints
+  dir?: Dir
+  enabled: boolean
+  gap: number
   height: string | number
   i18n: { [key in I18nKeys]?: string }
   ignoreAnimations: boolean | string[] | string
-  slideEffect: SlideEffect
+  itemsToScroll: number
+  itemsToShow: number | 'auto'
+  modelValue?: number
+  mouseDrag?: boolean
+  pauseAutoplayOnHover?: boolean
   preventExcessiveDragging: boolean
+  slideEffect: SlideEffect
+  snapAlign: SnapAlign
+  touchDrag?: boolean
+  transition?: number
+  wrapAround?: boolean
 }
 
 export type VueClass = string | Record<string, boolean> | VueClass[]