Skip to content

Commit

Permalink
feat(Carousel): new component (#927)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michał Hanusek <m.hanusek@myfreak.pl>
Co-authored-by: Inesh Bose <dev@inesh.xyz>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
  • Loading branch information
@Gobler @ineshbose @benjamincanac
4 people committed Jan 22, 2024
1 parent ea58c88 commit f37b043
Show file tree
Hide file tree
Showing 21 changed files with 676 additions and 4 deletions.
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExample.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/800?random=1',
'https://picsum.photos/600/800?random=2',
'https://picsum.photos/600/800?random=3',
'https://picsum.photos/600/800?random=4',
'https://picsum.photos/600/800?random=5',
'https://picsum.photos/600/800?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items">
<img :src="item" width="300" height="400">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleArrows.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/1920/1080?random=1',
'https://picsum.photos/1920/1080?random=2',
'https://picsum.photos/1920/1080?random=3',
'https://picsum.photos/1920/1080?random=4',
'https://picsum.photos/1920/1080?random=5',
'https://picsum.photos/1920/1080?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" arrows>
<img :src="item" class="w-full">
</UCarousel>
</template>
35 changes: 35 additions & 0 deletions docs/components/content/examples/CarouselExampleArrowsCenter.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/800?random=1',
'https://picsum.photos/600/800?random=2',
'https://picsum.photos/600/800?random=3',
'https://picsum.photos/600/800?random=4',
'https://picsum.photos/600/800?random=5',
'https://picsum.photos/600/800?random=6'
]
</script>

<template>
<UCarousel
v-slot="{ item }"
:items="items"
:ui="{
item: 'basis-full',
container: 'rounded-lg'
}"
:prev-button="{
color: 'gray',
icon: 'i-heroicons-arrow-left-20-solid',
class: '-left-12'
}"
:next-button="{
color: 'gray',
icon: 'i-heroicons-arrow-right-20-solid',
class: '-right-12'
}"
arrows
class="w-64 mx-auto"
>
<img :src="item" class="w-full">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleIndicators.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/1920/1080?random=1',
'https://picsum.photos/1920/1080?random=2',
'https://picsum.photos/1920/1080?random=3',
'https://picsum.photos/1920/1080?random=4',
'https://picsum.photos/1920/1080?random=5',
'https://picsum.photos/1920/1080?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" indicators>
<img :src="item" class="w-full">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleIndicatorsSize.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/600?random=1',
'https://picsum.photos/600/600?random=2',
'https://picsum.photos/600/600?random=3',
'https://picsum.photos/600/600?random=4',
'https://picsum.photos/600/600?random=5',
'https://picsum.photos/600/600?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }" indicators class="rounded-lg overflow-hidden">
<img :src="item" class="w-full">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleSize.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/600?random=1',
'https://picsum.photos/600/600?random=2',
'https://picsum.photos/600/600?random=3',
'https://picsum.photos/600/600?random=4',
'https://picsum.photos/600/600?random=5',
'https://picsum.photos/600/600?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }">
<img :src="item" class="w-full">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleSizeCenter.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/800?random=1',
'https://picsum.photos/600/800?random=2',
'https://picsum.photos/600/800?random=3',
'https://picsum.photos/600/800?random=4',
'https://picsum.photos/600/800?random=5',
'https://picsum.photos/600/800?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
<img :src="item" class="w-full">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleSizeFull.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/1920/1080?random=1',
'https://picsum.photos/1920/1080?random=2',
'https://picsum.photos/1920/1080?random=3',
'https://picsum.photos/1920/1080?random=4',
'https://picsum.photos/1920/1080?random=5',
'https://picsum.photos/1920/1080?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden">
<img :src="item" class="w-full">
</UCarousel>
</template>
33 changes: 33 additions & 0 deletions docs/components/content/examples/CarouselExampleSlotsDefault.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup lang="ts">
const items = [{
name: 'Sébastien Chopin',
to: 'https://github.com/Atinux',
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
}, {
name: 'Pooya Parsa',
to: 'https://github.com/pi0',
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
}, {
name: 'Daniel Roe',
to: 'https://github.com/danielroe',
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
}, {
name: 'Anthony Fu',
to: 'https://github.com/antfu',
avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
}]
</script>

<template>
<UCarousel :items="items" :ui="{ item: 'w-full' }">
<template #default="{ item, index }">
<div class="text-center mx-auto">
<img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2">

<p class="font-semibold">
{{ index + 1 }}. {{ item.name }}
</p>
</div>
</template>
</UCarousel>
</template>
33 changes: 33 additions & 0 deletions docs/components/content/examples/CarouselExampleSlotsIndicator.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/800?random=1',
'https://picsum.photos/600/800?random=2',
'https://picsum.photos/600/800?random=3',
'https://picsum.photos/600/800?random=4',
'https://picsum.photos/600/800?random=5',
'https://picsum.photos/600/800?random=6'
]
</script>

<template>
<UCarousel
:items="items"
:ui="{
item: 'basis-full',
container: 'rounded-lg',
indicators: {
wrapper: 'relative bottom-0 mt-4'
}
}"
indicators
class="w-64 mx-auto"
>
<template #default="{ item }">
<img :src="item" class="w-full">
</template>

<template #indicator="{ onClick, index, active }">
<UButton :label="index" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(index)" />
</template>
</UCarousel>
</template>
38 changes: 38 additions & 0 deletions docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/600/800?random=1',
'https://picsum.photos/600/800?random=2',
'https://picsum.photos/600/800?random=3',
'https://picsum.photos/600/800?random=4',
'https://picsum.photos/600/800?random=5',
'https://picsum.photos/600/800?random=6'
]
</script>

<template>
<UCarousel
:items="items"
:ui="{
item: 'basis-full',
container: 'rounded-lg'
}"
arrows
class="w-64 mx-auto"
>
<template #default="{ item }">
<img :src="item" class="w-full">
</template>

<template #prev="{ onClick, disabled }">
<button :disabled="disabled" @click="onClick">
Prev
</button>
</template>

<template #next="{ onClick, disabled }">
<button :disabled="disabled" class="" @click="onClick">
Next
</button>
</template>
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleSnapEnd.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/400/600?random=1',
'https://picsum.photos/400/600?random=2',
'https://picsum.photos/400/600?random=3',
'https://picsum.photos/400/600?random=4',
'https://picsum.photos/400/600?random=5',
'https://picsum.photos/400/600?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
<img :src="item" width="200" height="300">
</UCarousel>
</template>
16 changes: 16 additions & 0 deletions docs/components/content/examples/CarouselExampleSnapStart.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
const items = [
'https://picsum.photos/400/600?random=1',
'https://picsum.photos/400/600?random=2',
'https://picsum.photos/400/600?random=3',
'https://picsum.photos/400/600?random=4',
'https://picsum.photos/400/600?random=5',
'https://picsum.photos/400/600?random=6'
]
</script>

<template>
<UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
<img :src="item" width="200" height="300">
</UCarousel>
</template>
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/3.theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export default defineAppConfig({

Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.

You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`:
You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:

```ts [app.config.ts]
export default defineAppConfig({
Expand Down Expand Up @@ -175,7 +175,7 @@ To change the font of the `label`, you only need to write:

This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.

You can change this behaviour by setting `strategy` to `override` inside the `ui` prop:
You can change this behavior by setting `strategy` to `override` inside the `ui` prop:

```vue
<UButton
Expand Down
Loading

1 comment on commit f37b043

@vercel
Copy link

@vercel vercel bot commented on f37b043 Jan 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-git-dev-nuxt-js.vercel.app
ui-nuxt-js.vercel.app
ui.nuxt.com

Please sign in to comment.