mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
5 months ago
|
import emblaCarouselVue from 'embla-carousel-vue'
|
||
|
import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
|
||
|
|
||
|
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
|
||
|
({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
|
||
|
const [emblaNode, emblaApi] = emblaCarouselVue(
|
||
|
{
|
||
|
...opts,
|
||
|
axis: orientation === 'horizontal' ? 'x' : 'y',
|
||
|
},
|
||
|
plugins,
|
||
|
)
|
||
|
|
||
|
function scrollPrev() {
|
||
|
emblaApi.value?.scrollPrev()
|
||
|
}
|
||
|
function scrollNext() {
|
||
|
emblaApi.value?.scrollNext()
|
||
|
}
|
||
|
|
||
|
const canScrollNext = ref(false)
|
||
|
const canScrollPrev = ref(false)
|
||
|
|
||
|
function onSelect(api: CarouselApi) {
|
||
|
canScrollNext.value = api?.canScrollNext() || false
|
||
|
canScrollPrev.value = api?.canScrollPrev() || false
|
||
|
}
|
||
|
|
||
|
onMounted(() => {
|
||
|
if (!emblaApi.value) return
|
||
|
|
||
|
emblaApi.value?.on('init', onSelect)
|
||
|
emblaApi.value?.on('reInit', onSelect)
|
||
|
emblaApi.value?.on('select', onSelect)
|
||
|
|
||
|
emits('init-api', emblaApi.value)
|
||
|
})
|
||
|
|
||
|
return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
|
||
|
},
|
||
|
)
|
||
|
|
||
|
function useCarousel() {
|
||
|
const carouselState = useInjectCarousel()
|
||
|
|
||
|
if (!carouselState) throw new Error('useCarousel must be used within a <Carousel />')
|
||
|
|
||
|
return carouselState
|
||
|
}
|
||
|
|
||
|
export { useCarousel, useProvideCarousel }
|