better-auth/examples/nuxt-example/components/ui/carousel/useCarousel.ts

import { createInjectionState } from "@vueuse/core";
import emblaCarouselVue from "embla-carousel-vue";
import { onMounted, ref } from "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 };