feat: add example for using embla plugin

apps/www/__registry__/index.ts

@@ -205,6 +205,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
     },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselPlugin.vue'],
+    },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',
@@ -1033,6 +1040,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
     },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselPlugin.vue'],
+    },
     CarouselSize: {
       name: 'CarouselSize',
       type: 'components:example',

apps/www/package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.0.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
+    "embla-carousel-autoplay": "8.0.0-rc17",
     "embla-carousel-vue": "8.0.0-rc17",
     "lucide-vue-next": "^0.276.0",
     "radix-vue": "^1.2.5",

apps/www/src/content/docs/components/carousel.md

@@ -215,3 +215,28 @@ const stop = watch(api, (api) => {
 ```
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```vue showLineNumbers {2,8-10}
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+</script>
+
+<template>
+  <Carousel
+    class="w-full max-w-xs"
+    :plugins="[Autoplay({
+      delay: 2000,
+    })]"
+  >
+    ...
+  </Carousel>
+</template>
+```
+
+<ComponentPreview name="CarouselPlugin" />
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.

apps/www/src/lib/registry/default/example/CarouselPlugin.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+import { ref } from 'vue'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+const plugin = ref(Autoplay({
+  delay: 2000,
+  stopOnMouseEnter: true,
+  stopOnInteraction: false,
+}))
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Carousel
+      class="w-full max-w-xs"
+      :plugins="[plugin]"
+      @mouseenter="plugin.stop"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Autoplay from 'embla-carousel-autoplay'
+import { ref } from 'vue'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
+
+const plugin = ref(Autoplay({
+  delay: 2000,
+  stopOnMouseEnter: true,
+  stopOnInteraction: false,
+}))
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Carousel
+      class="w-full max-w-xs"
+      :plugins="[plugin]"
+      @mouseenter="plugin.stop"
+      @mouseleave="[plugin.reset(), plugin.play(), console.log('Rungin')];"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 5" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  </div>
+</template>

pnpm-lock.yaml

@@ -83,6 +83,9 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      embla-carousel-autoplay:
+        specifier: 8.0.0-rc17
+        version: 8.0.0-rc17(embla-carousel@8.0.0-rc17)
       embla-carousel-vue:
         specifier: 8.0.0-rc17
         version: 8.0.0-rc17(vue@3.3.7)
@@ -6898,6 +6901,14 @@ packages:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
     dev: false
 
+  /embla-carousel-autoplay@8.0.0-rc17(embla-carousel@8.0.0-rc17):
+    resolution: {integrity: sha512-U8YweUZg2DJd3IXxTV3UsjFyJEsQuCHOBRyJxoJZ8r1L/SYbYnk7BbknH6N0yfgzeMn6pL27RPEf0vIz+JtFYw==}
+    peerDependencies:
+      embla-carousel: 8.0.0-rc17
+    dependencies:
+      embla-carousel: 8.0.0-rc17
+    dev: false
+
   /embla-carousel-reactive-utils@8.0.0-rc17(embla-carousel@8.0.0-rc17):
     resolution: {integrity: sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==}
     peerDependencies: