Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: use shadcn-ui way to extract types from embla-carousel-vue module

Browse Source
This commit is contained in:
sadeghbarati 2024-06-15 10:53:48 +03:30
parent 7c8e03d81e
commit bf0f4ed6b2
7 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/lib/registry/default/ui/carousel/index.ts
View File

@ -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'

22
apps/www/src/lib/registry/default/ui/carousel/interface.ts
View File

@ -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<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
export interface CarouselProps {
opts?: CarouselOptions | Ref<CarouselOptions>
plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
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 {

7
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
View File

@ -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
}

4
apps/www/src/lib/registry/new-york/ui/carousel/index.ts
View File

@ -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'

22
apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
View File

@ -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<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
export interface CarouselProps {
opts?: CarouselOptions | Ref<CarouselOptions>
plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
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 {

7
apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
View File

@ -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
}

2
apps/www/src/lib/registry/registry.ts
View File

@ -12,7 +12,7 @@ const DEPENDENCIES = new Map<string, string[]>([
['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.