feat(InlineCitation): add loop mode support for circular scrolling

Author: snowbitx

apps/www/content/3.components/1.chatbot/inline-citation.md

@@ -135,7 +135,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Carousel :class="cn('w-full', props.class)">
+  <Carousel :class="cn('w-full', props.class)" :opts="{ loop: true }">
     <slot />
   </Carousel>
 </template>

packages/elements/src/inline-citation/InlineCitationCarousel.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Carousel :class="cn('w-full', props.class)">
+  <Carousel :class="cn('w-full', props.class)" :opts="{ loop: true }">
     <slot />
   </Carousel>
 </template>

packages/shadcn-vue/components/ui/carousel/useCarousel.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 import { createInjectionState } from '@vueuse/core'
 import emblaCarouselVue from 'embla-carousel-vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, unref } from 'vue'
 
 interface CarouselContext {
   carouselRef: Ref<HTMLElement | undefined>
@@ -36,8 +36,14 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
     const canScrollPrev = ref(false)
 
     function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
+      if (unref(opts)?.loop) {
+        canScrollNext.value = true
+        canScrollPrev.value = true
+      }
+      else {
+        canScrollNext.value = api?.canScrollNext() || false
+        canScrollPrev.value = api?.canScrollPrev() || false
+      }
     }
 
     onMounted(() => {