Merge pull request #429 from ismail9k/392-typescript-support

Better support for typescript and add CarouselExposed type

src/components/Carousel.ts

@@ -18,7 +18,7 @@ import {
 
 import { DEFAULT_CONFIG } from '@/partials/defaults'
 import { carouselProps } from '@/partials/props'
-import { CarouselConfig, CarouselNav } from '@/types'
+import { CarouselConfig, CarouselExposed, CarouselNav } from '@/types'
 import {
   debounce,
   throttle,
@@ -36,6 +36,15 @@ import SlideComponent from './Slide'
 export default defineComponent({
   name: 'Carousel',
   props: carouselProps,
+  emits: [
+    'init',
+    'drag',
+    'slide-start',
+    'loop',
+    'update:modelValue',
+    'slide-end',
+    'before-init',
+  ],
   setup(props: CarouselConfig, { slots, emit, expose }: SetupContext) {
     const root: Ref<Element | null> = ref(null)
     const viewport: Ref<Element | null> = ref(null)
@@ -412,15 +421,13 @@ export default defineComponent({
       config,
       slidesCount,
       slideSize,
-      next,
-      prev,
-      slideTo,
       currentSlide: currentSlideIndex,
       maxSlide: maxSlideIndex,
       minSlide: minSlideIndex,
       middleSlide: middleSlideIndex,
     }
-    expose({
+
+    expose<CarouselExposed>({
       updateBreakpointsConfig,
       updateSlidesData,
       updateSlideSize,

src/components/Navigation.ts

@@ -13,7 +13,7 @@ const Navigation = (props: any, { slots, attrs }: any) => {
   const minSlide = inject('minSlide', ref(1))
   const normalizeDir = inject('normalizeDir', ref('ltr'))
   const currentSlide = inject('currentSlide', ref(1))
-  const nav: CarouselNav = inject('nav', {})
+  const nav: CarouselNav = inject('nav', {} as CarouselNav)
 
   const { wrapAround, i18n } = config
   const getPrevIcon = (): string => {

src/components/Pagination.ts

@@ -11,7 +11,7 @@ const Pagination = () => {
   const maxSlide = inject('maxSlide', ref(1))
   const minSlide = inject('minSlide', ref(1))
   const currentSlide = inject('currentSlide', ref(1))
-  const nav: CarouselNav = inject('nav', {})
+  const nav: CarouselNav = inject('nav', {} as CarouselNav)
 
   const isActive = (slide: number): boolean =>
     mapNumberToRange({

src/index.ts

@@ -5,5 +5,5 @@ import Navigation from './components/Navigation'
 import Pagination from './components/Pagination'
 import Slide from './components/Slide'
 
-export * from '@/types'
+export type * from '@/types'
 export { Carousel, Slide, Navigation, Pagination, Icon }

src/types/carousel.ts

@@ -1,3 +1,5 @@
+import { Ref } from 'vue'
+
 import {
   BREAKPOINT_MODE_OPTIONS,
   DIR_OPTIONS,
@@ -35,9 +37,28 @@ export interface CarouselConfig {
 }
 
 export interface CarouselNav {
-  [key: string]: any
+  slideTo: (index: number) => void
+  next: () => void
+  prev: () => void
+}
+
+export interface CarouselData {
+  config: CarouselConfig
+  slidesCount: Ref<number>
+  slideSize: Ref<number>
+  currentSlide: Ref<number>
+  maxSlide: Ref<number>
+  minSlide: Ref<number>
+  middleSlide: Ref<number>
 }
 
-export interface ElementStyleObject {
-  [key: string]: any
+export interface CarouselMethods extends CarouselNav {
+  updateBreakpointsConfig: () => void
+  updateSlidesData: () => void
+  updateSlideSize: () => void
+  restartCarousel: () => void
+}
+export interface CarouselExposed extends CarouselMethods {
+  nav: CarouselNav
+  data: CarouselData
 }