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

chore: update

Browse Source
This commit is contained in:
sadeghbarati 2024-05-05 12:37:09 +03:30
parent d4dba6439c
commit 6afa061aa3
7 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,4 @@
--- ---
```
---
title: Carousel title: Carousel
description: A carousel with motion and swipe built using Embla. description: A carousel with motion and swipe built using Embla.
source: apps/www/src/lib/registry/default/ui/carousel source: apps/www/src/lib/registry/default/ui/carousel
@ -36,7 +33,6 @@ import {
<template> <template>
<Carousel> <Carousel>
<CarouselDotButtons />
<CarouselContent> <CarouselContent>
<CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem>
@ -44,6 +40,8 @@ import {
</CarouselContent> </CarouselContent>
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
<CarouselDotButtons />
</Carousel> </Carousel>
</template> </template>
``` ```

4
apps/www/src/lib/registry/default/example/CarouselDemo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel' import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
import { Card, CardContent } from '@/lib/registry/default/ui/card' import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script> </script>
@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
</CarouselContent> </CarouselContent>
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
<CarouselDotButtons class="mt-4" />
</Carousel> </Carousel>
</template> </template>

16
apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
View File

@ -8,11 +8,13 @@ const { scrollTo, selectedIndex, scrollSnaps } = useCarousel()
</script> </script>
<template> <template>
<div <div class="flex gap-2 justify-center">
v-for="(_, index) in scrollSnaps" <div
:key="index" v-for="(_, index) in scrollSnaps"
class="sm:mt-0 first:ml-0 border-1 w-2 h-2 mt-2 ml-2 border-gray-200 border-solid rounded-full" :key="index"
:class="[cn(props.class), index === selectedIndex ? 'border-transparent bg-blue-400' : 'bg-transparent']" class="border-1 w-2 h-2 rounded-full"
@click="scrollTo(index)" :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
/> @click="scrollTo(index)"
/>
</div>
</template> </template>

1
apps/www/src/lib/registry/default/ui/carousel/index.ts
View File

@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
export { default as CarouselItem } from './CarouselItem.vue' export { default as CarouselItem } from './CarouselItem.vue'
export { default as CarouselPrevious } from './CarouselPrevious.vue' export { default as CarouselPrevious } from './CarouselPrevious.vue'
export { default as CarouselNext } from './CarouselNext.vue' export { default as CarouselNext } from './CarouselNext.vue'
export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
export { useCarousel } from './useCarousel' export { useCarousel } from './useCarousel'
export type { export type {

4
apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel' import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
import { Card, CardContent } from '@/lib/registry/new-york/ui/card' import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</script> </script>
@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</CarouselContent> </CarouselContent>
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
<CarouselDotButtons class="mt-4" />
</Carousel> </Carousel>
</template> </template>

16
apps/www/src/lib/registry/new-york/ui/carousel/CarouselDotButtons.vue
View File

@ -8,11 +8,13 @@ const { scrollTo, selectedIndex, scrollSnaps } = useCarousel()
</script> </script>
<template> <template>
<div <div class="flex gap-2 justify-center">
v-for="(item, index) in scrollSnaps" <div
:key="index" v-for="(_, index) in scrollSnaps"
class="sm:mt-0 first:ml-0 border-1 w-2 h-2 mt-2 ml-2 border-gray-200 border-solid rounded-full" :key="index"
:class="[cn(props.class), index === selectedIndex ? 'border-transparent bg-blue-400' : 'bg-transparent']" class="border-1 w-2 h-2 rounded-full"
@click="scrollTo(index)" :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
/> @click="scrollTo(index)"
/>
</div>
</template> </template>

1
apps/www/src/lib/registry/new-york/ui/carousel/index.ts
View File

@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
export { default as CarouselItem } from './CarouselItem.vue' export { default as CarouselItem } from './CarouselItem.vue'
export { default as CarouselPrevious } from './CarouselPrevious.vue' export { default as CarouselPrevious } from './CarouselPrevious.vue'
export { default as CarouselNext } from './CarouselNext.vue' export { default as CarouselNext } from './CarouselNext.vue'
export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
export { useCarousel } from './useCarousel' export { useCarousel } from './useCarousel'
export type { export type {