Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add example for using embla plugin

Browse Source
This commit is contained in:
wasimTQ 2023-12-29 22:38:36 +05:30
parent 43daeb3c87
commit 6ded40c5a9
6 changed files with 126 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/www/__registry__/index.ts
View File

@ -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',

1
apps/www/package.json
View File

@ -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",

27
apps/www/src/content/docs/components/carousel.md
View File

@ -214,4 +214,29 @@ const stop = watch(api, (api) => {
</template>
```
See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
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.

37
apps/www/src/lib/registry/default/example/CarouselPlugin.vue Normal file
View File

@ -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>

37
apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue Normal file
View File

@ -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>

11
pnpm-lock.yaml
View File

@ -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: