From c1180e598186132a08993653a8dba26e6d9269bc Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Mon, 25 Nov 2024 16:17:12 +0300 Subject: [PATCH 1/3] chore: correctly export carousel types --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 460c1b2d..69705ac8 100644 --- a/src/index.ts +++ b/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 } From 4fadaced7ebfc476dd93c949e80611097a658242 Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Mon, 25 Nov 2024 16:17:28 +0300 Subject: [PATCH 2/3] chore: support CarouselExposed interface --- src/components/Carousel.ts | 17 ++++++++++++----- src/components/Navigation.ts | 2 +- src/components/Pagination.ts | 2 +- src/types/carousel.ts | 27 ++++++++++++++++++++++++--- 4 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/components/Carousel.ts b/src/components/Carousel.ts index 3c41166f..885be088 100644 --- a/src/components/Carousel.ts +++ b/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 = ref(null) const viewport: Ref = 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({ updateBreakpointsConfig, updateSlidesData, updateSlideSize, diff --git a/src/components/Navigation.ts b/src/components/Navigation.ts index 2d9e8e6a..321a47c5 100644 --- a/src/components/Navigation.ts +++ b/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 => { diff --git a/src/components/Pagination.ts b/src/components/Pagination.ts index fae750cf..b6edb795 100644 --- a/src/components/Pagination.ts +++ b/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({ diff --git a/src/types/carousel.ts b/src/types/carousel.ts index 226813c2..ec926cfd 100644 --- a/src/types/carousel.ts +++ b/src/types/carousel.ts @@ -1,3 +1,5 @@ +import { Ref } from 'vue' + import { BREAKPOINT_MODE_OPTIONS, DIR_OPTIONS, @@ -34,10 +36,29 @@ export interface CarouselConfig { i18n: { [key in I18nKeys]?: string } } +// Carousel navigation methods export interface CarouselNav { - [key: string]: any + slideTo: (index: number) => void + next: () => void + prev: () => void } -export interface ElementStyleObject { - [key: string]: any +export interface CarouselExposed { + updateBreakpointsConfig: () => void + updateSlidesData: () => void + updateSlideSize: () => void + restartCarousel: () => void + slideTo: (index: number) => void + next: () => void + prev: () => void + nav: CarouselNav + data: { + config: CarouselConfig + slidesCount: Ref + slideSize: Ref + currentSlide: Ref + maxSlide: Ref + minSlide: Ref + middleSlide: Ref + } } From 1f7dd064de054921a31882893e4f6310a3d93fcc Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Tue, 26 Nov 2024 10:44:24 +0300 Subject: [PATCH 3/3] chore: add more types --- src/types/carousel.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/types/carousel.ts b/src/types/carousel.ts index ec926cfd..3289eeea 100644 --- a/src/types/carousel.ts +++ b/src/types/carousel.ts @@ -36,29 +36,29 @@ export interface CarouselConfig { i18n: { [key in I18nKeys]?: string } } -// Carousel navigation methods export interface CarouselNav { slideTo: (index: number) => void next: () => void prev: () => void } -export interface CarouselExposed { +export interface CarouselData { + config: CarouselConfig + slidesCount: Ref + slideSize: Ref + currentSlide: Ref + maxSlide: Ref + minSlide: Ref + middleSlide: Ref +} + +export interface CarouselMethods extends CarouselNav { updateBreakpointsConfig: () => void updateSlidesData: () => void updateSlideSize: () => void restartCarousel: () => void - slideTo: (index: number) => void - next: () => void - prev: () => void +} +export interface CarouselExposed extends CarouselMethods { nav: CarouselNav - data: { - config: CarouselConfig - slidesCount: Ref - slideSize: Ref - currentSlide: Ref - maxSlide: Ref - minSlide: Ref - middleSlide: Ref - } + data: CarouselData }