arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Carousel): resolve plugins with page transitions (#4380)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Mike Newbon
2025-06-30 14:55:07 +02:00
committed by GitHub
parent df8f20232f
commit 3b67d54833
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/runtime/components/Carousel.vue
View File

@@ -118,7 +118,7 @@ export interface CarouselEmits {
import { computed, ref, watch, onMounted } from 'vue' import { computed, ref, watch, onMounted } from 'vue'
import useEmblaCarousel from 'embla-carousel-vue' import useEmblaCarousel from 'embla-carousel-vue'
import { Primitive, useForwardProps } from 'reka-ui' import { Primitive, useForwardProps } from 'reka-ui'
import { reactivePick, computedAsync } from '@vueuse/core' import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
import { useLocale } from '../composables/useLocale' import { useLocale } from '../composables/useLocale'
import { tv } from '../utils/tv' import { tv } from '../utils/tv'
@@ -175,41 +175,45 @@ const options = computed<EmblaOptionsType>(() => ({
direction: dir.value === 'rtl' ? 'rtl' : 'ltr' direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
})) }))
const plugins = computedAsync<EmblaPluginType[]>(async () => { const plugins = ref<EmblaPluginType[]>([])
const plugins = []
async function loadPlugins() {
const emblaPlugins: EmblaPluginType[] = []
if (props.autoplay) { if (props.autoplay) {
const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default) const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay)) emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
} }
if (props.autoScroll) { if (props.autoScroll) {
const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default) const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll)) emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
} }
if (props.autoHeight) { if (props.autoHeight) {
const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default) const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight)) emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
} }
if (props.classNames) { if (props.classNames) {
const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default) const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames)) emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
} }
if (props.fade) { if (props.fade) {
const FadePlugin = await import('embla-carousel-fade').then(r => r.default) const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade)) emblaPlugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
} }
if (props.wheelGestures) { if (props.wheelGestures) {
const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures') const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures)) emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
} }
return plugins plugins.value = emblaPlugins
}) }
watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true })
const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value) const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)