From bf0f4ed6b292a64108120a20c6ab30da9f080145 Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Sat, 15 Jun 2024 10:53:48 +0330 Subject: [PATCH] chore: use shadcn-ui way to extract types from embla-carousel-vue module --- .../lib/registry/default/ui/carousel/index.ts | 4 ++-- .../registry/default/ui/carousel/interface.ts | 22 ++++++++++++------- .../default/ui/carousel/useCarousel.ts | 7 ++---- .../registry/new-york/ui/carousel/index.ts | 4 ++-- .../new-york/ui/carousel/interface.ts | 22 ++++++++++++------- .../new-york/ui/carousel/useCarousel.ts | 7 ++---- apps/www/src/lib/registry/registry.ts | 2 +- 7 files changed, 37 insertions(+), 31 deletions(-) diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/src/lib/registry/default/ui/carousel/index.ts index addfe036..5ccaad27 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/index.ts +++ b/apps/www/src/lib/registry/default/ui/carousel/index.ts @@ -6,5 +6,5 @@ export { default as CarouselNext } from './CarouselNext.vue' export { useCarousel } from './useCarousel' export type { - EmblaCarouselType as CarouselApi, -} from 'embla-carousel' + UnwrapRefCarouselApi as CarouselApi, +} from './interface' diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts index 99c4f1a8..195ff811 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts +++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts @@ -1,18 +1,24 @@ +import type { HTMLAttributes, UnwrapRef } from 'vue' +import type useEmblaCarousel from 'embla-carousel-vue' import type { - EmblaCarouselType as CarouselApi, - EmblaOptionsType as CarouselOptions, - EmblaPluginType as CarouselPlugin, -} from 'embla-carousel' -import type { HTMLAttributes, Ref } from 'vue' + EmblaCarouselVueType, +} from 'embla-carousel-vue' + +type CarouselApi = EmblaCarouselVueType[1] +type UseCarouselParameters = Parameters +type CarouselOptions = UseCarouselParameters[0] +type CarouselPlugin = UseCarouselParameters[1] + +export type UnwrapRefCarouselApi = UnwrapRef export interface CarouselProps { - opts?: CarouselOptions | Ref - plugins?: CarouselPlugin[] | Ref + opts?: CarouselOptions + plugins?: CarouselPlugin orientation?: 'horizontal' | 'vertical' } export interface CarouselEmits { - (e: 'init-api', payload: CarouselApi): void + (e: 'init-api', payload: UnwrapRefCarouselApi): void } export interface WithClassAsProps { diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts index 51b81680..012d9434 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts +++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts @@ -1,10 +1,7 @@ import { createInjectionState } from '@vueuse/core' import emblaCarouselVue from 'embla-carousel-vue' import { onMounted, ref } from 'vue' -import type { - EmblaCarouselType as CarouselApi, -} from 'embla-carousel' -import type { CarouselEmits, CarouselProps } from './interface' +import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface' const [useProvideCarousel, useInjectCarousel] = createInjectionState( ({ @@ -27,7 +24,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState( const canScrollNext = ref(false) const canScrollPrev = ref(false) - function onSelect(api?: CarouselApi) { + function onSelect(api: CarouselApi) { canScrollNext.value = api?.canScrollNext() || false canScrollPrev.value = api?.canScrollPrev() || false } diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts index addfe036..5ccaad27 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts +++ b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts @@ -6,5 +6,5 @@ export { default as CarouselNext } from './CarouselNext.vue' export { useCarousel } from './useCarousel' export type { - EmblaCarouselType as CarouselApi, -} from 'embla-carousel' + UnwrapRefCarouselApi as CarouselApi, +} from './interface' diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts index 99c4f1a8..195ff811 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts +++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts @@ -1,18 +1,24 @@ +import type { HTMLAttributes, UnwrapRef } from 'vue' +import type useEmblaCarousel from 'embla-carousel-vue' import type { - EmblaCarouselType as CarouselApi, - EmblaOptionsType as CarouselOptions, - EmblaPluginType as CarouselPlugin, -} from 'embla-carousel' -import type { HTMLAttributes, Ref } from 'vue' + EmblaCarouselVueType, +} from 'embla-carousel-vue' + +type CarouselApi = EmblaCarouselVueType[1] +type UseCarouselParameters = Parameters +type CarouselOptions = UseCarouselParameters[0] +type CarouselPlugin = UseCarouselParameters[1] + +export type UnwrapRefCarouselApi = UnwrapRef export interface CarouselProps { - opts?: CarouselOptions | Ref - plugins?: CarouselPlugin[] | Ref + opts?: CarouselOptions + plugins?: CarouselPlugin orientation?: 'horizontal' | 'vertical' } export interface CarouselEmits { - (e: 'init-api', payload: CarouselApi): void + (e: 'init-api', payload: UnwrapRefCarouselApi): void } export interface WithClassAsProps { diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts index 51b81680..012d9434 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts +++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts @@ -1,10 +1,7 @@ import { createInjectionState } from '@vueuse/core' import emblaCarouselVue from 'embla-carousel-vue' import { onMounted, ref } from 'vue' -import type { - EmblaCarouselType as CarouselApi, -} from 'embla-carousel' -import type { CarouselEmits, CarouselProps } from './interface' +import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface' const [useProvideCarousel, useInjectCarousel] = createInjectionState( ({ @@ -27,7 +24,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState( const canScrollNext = ref(false) const canScrollPrev = ref(false) - function onSelect(api?: CarouselApi) { + function onSelect(api: CarouselApi) { canScrollNext.value = api?.canScrollNext() || false canScrollPrev.value = api?.canScrollPrev() || false } diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts index cbe19276..424c34d9 100644 --- a/apps/www/src/lib/registry/registry.ts +++ b/apps/www/src/lib/registry/registry.ts @@ -12,7 +12,7 @@ const DEPENDENCIES = new Map([ ['v-calendar', []], ['@tanstack/vue-table', []], ['@unovis/vue', ['@unovis/ts']], - ['embla-carousel-vue', ['embla-carousel']], + ['embla-carousel-vue', []], ['vee-validate', ['@vee-validate/zod', 'zod']], ]) // Some dependencies latest tag were not compatible with Vue3.