From 0ebf7d9a0373dac9f4db2adf2437a1959e74750d Mon Sep 17 00:00:00 2001
From: cadiyak <cadiyak@hotmail.fr>
Date: Sat, 27 Aug 2022 15:41:36 +0200
Subject: [PATCH 1/3] feat: start to implement carousel.

---
 .../CarouselAutomaticSlideExample.vue         |  8 ++
 .../examples/CarouselDefaultExample.vue       |  8 ++
 .../examples/CarouselNoControlsExample.vue    |  8 ++
 .../examples/CarouselNoIndicatorsExample.vue  |  8 ++
 .../examples/CarouselPicturesExample.vue      | 30 ++++++
 .../examples/CarouselSlideExample.vue         |  8 ++
 .../examples/CarouselSlideIntervalExample.vue |  8 ++
 src/components/Carousel/Carousel.vue          | 94 ++++++++++++++-----
 8 files changed, 149 insertions(+), 23 deletions(-)
 create mode 100644 docs/components/carousel/examples/CarouselAutomaticSlideExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselDefaultExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselNoControlsExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselNoIndicatorsExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselPicturesExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselSlideExample.vue
 create mode 100644 docs/components/carousel/examples/CarouselSlideIntervalExample.vue

diff --git a/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue b/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue
new file mode 100644
index 0000000..408e9ad
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselAutomaticSlideExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :slide="true"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel/examples/CarouselDefaultExample.vue b/docs/components/carousel/examples/CarouselDefaultExample.vue
new file mode 100644
index 0000000..8cab2e4
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselDefaultExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel/examples/CarouselNoControlsExample.vue b/docs/components/carousel/examples/CarouselNoControlsExample.vue
new file mode 100644
index 0000000..b3c747d
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselNoControlsExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :controls="false"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue b/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue
new file mode 100644
index 0000000..b5b62f8
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselNoIndicatorsExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :indicators="false"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel/examples/CarouselPicturesExample.vue b/docs/components/carousel/examples/CarouselPicturesExample.vue
new file mode 100644
index 0000000..cf2dfac
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselPicturesExample.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :pictures="pictures"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+const pictures = [
+  {
+    'src': 'https://i.picsum.photos/id/221/1920/1080.jpg?grayscale&hmac=GWPBzHGEhEh-BrPn1i-PuximCxLtUpKHcNwyACiTRHk',
+    'alt': 'Picture 1',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/608/1920/1080.jpg?grayscale&hmac=kkVc8-M3ovbO-sFr02WmRbrHx5YcfWmOtkP8rNF9fO4',
+    'alt': 'Picture 2',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/1012/1920/1080.jpg?grayscale&hmac=Zy9JmZ_sl88DXTF502k_0QqaeCyqjhkn60DjyE5F8Eo',
+    'alt': 'Picture 3',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/1004/1920/1080.jpg?grayscale&hmac=48C-T9K-36l8jpzJntPTu40OiDuXflIlG_YB-lQWYZI',
+    'alt': 'Picture 4',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/244/1920/1080.jpg?grayscale&hmac=lLcfHciI-EqaOIHGB_Gab7OpUjVSmDLw6GOq6B5THak',
+    'alt': 'Picture 5',
+ },
+]
+</script>
diff --git a/docs/components/carousel/examples/CarouselSlideExample.vue b/docs/components/carousel/examples/CarouselSlideExample.vue
new file mode 100644
index 0000000..408e9ad
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselSlideExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :slide="true"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/docs/components/carousel/examples/CarouselSlideIntervalExample.vue b/docs/components/carousel/examples/CarouselSlideIntervalExample.vue
new file mode 100644
index 0000000..7988190
--- /dev/null
+++ b/docs/components/carousel/examples/CarouselSlideIntervalExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Carousel :slide="true" :slide-interval="1000"></Carousel>
+  </div>
+</template>
+<script setup>
+import { Carousel } from '../../../../src/index'
+</script>
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index 52e4588..7045730 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -1,35 +1,26 @@
 <template>
-  <div id="default-carousel" class="relative" data-carousel="static">
+  <div id="default-carousel" class="relative">
     <!-- Carousel wrapper -->
     <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
       <!-- Item 1 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
-<!--        <img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
-      </div>
-      <!-- Item 2 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-<!--        <img src="/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
-      </div>
-      <!-- Item 3 -->
-      <div class="hidden duration-700 ease-in-out" data-carousel-item>
-<!--        <img src="/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">-->
+<!--      duration-700 ease-in-out-->
+      <div :class="index === currentPicture ? 'z-30' : 'z-0'"
+           v-for="(picture, index) in pictures" :key="picture" class="absolute inset-0 -translate-y-0">
+        <img :src="picture.src" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" :alt="picture.alt">
       </div>
     </div>
     <!-- Slider indicators -->
-    <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
-      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
+    <div v-if="indicators" class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
+      <button v-for="(picture, index) in pictures" :key="picture" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
     </div>
     <!-- Slider controls -->
-    <button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
+    <button v-if="controls" @click.prevent="previousPicture" type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
       <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
         <span class="hidden">Previous</span>
       </span>
     </button>
-    <button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+    <button v-if="controls" @click.prevent="nextPicture" type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
       <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
         <span class="hidden">Next</span>
@@ -38,28 +29,85 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps({
-  children: {
+  pictures: {
     type: Array,
     default() {
-      return []
+      return [
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+          'alt': 'Picture 1',
+        },
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+          'alt': 'Picture 2',
+        },
+        {
+          'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+          'alt': 'Picture 3',
+        },
+      ]
     },
   },
   indicators: {
     type: Boolean,
     default: true,
   },
-  slide: {
+  controls: {
     type: Boolean,
     default: true,
   },
+  slide: {
+    type: Boolean,
+    default: false,
+  },
   slideInterval: {
     type: Number,
     default: 3000,
   },
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPicture = ref(0)
+const direction = ref('')
+
+const automaticSlide = () => {
+    setInterval(function() {
+      nextPicture()
+    }, props.slideInterval)
+}
+
+const slideTo = (index: number) => {
+  currentPicture.value = index
+}
+
+const nextPicture = () => {
+  if (currentPicture.value !== props.pictures.length - 1) {
+    currentPicture.value ++
+  } else {
+    currentPicture.value = 0
+  }
+  direction.value = 'right'
+}
+
+const previousPicture = () => {
+  if (currentPicture.value !== 0) {
+    currentPicture.value --
+  } else {
+    currentPicture.value = props.pictures.length -1
+  }
+  direction.value = 'left'
+}
+
+onMounted(() => {
+  if (props.slide) {
+    automaticSlide()
+  }
 })
 
 </script>

From 62edbd74ff1a1f0ee7695b73fe1c21ba5310ac1f Mon Sep 17 00:00:00 2001
From: cadiyak <cadiyak@hotmail.fr>
Date: Sat, 27 Aug 2022 15:42:09 +0200
Subject: [PATCH 2/3] doc: update carousel's doc.

---
 docs/components/carousel/carousel.md | 158 ++++++++++++++++++++++++++-
 1 file changed, 156 insertions(+), 2 deletions(-)

diff --git a/docs/components/carousel/carousel.md b/docs/components/carousel/carousel.md
index 5e41553..75dcd56 100644
--- a/docs/components/carousel/carousel.md
+++ b/docs/components/carousel/carousel.md
@@ -1,8 +1,17 @@
 <script setup>
-import CarouselExample from './examples/CarouselExample.vue'
+import CarouselDefaultExample from './examples/CarouselDefaultExample.vue';
+import CarouselNoControlsExample from './examples/CarouselNoControlsExample.vue';
+import CarouselNoIndicatorsExample from './examples/CarouselNoIndicatorsExample.vue';
+import CarouselSlideExample from './examples/CarouselSlideExample.vue';
+import CarouselSlideIntervalExample from './examples/CarouselSlideIntervalExample.vue';
+import CarouselPicturesExample from './examples/CarouselPicturesExample.vue';
 </script>
 # Carousel
 
+Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
+
+## Default slider
+
 ```vue
 <script setup>
 import { Carousel } from 'flowbite-vue'
@@ -12,4 +21,149 @@ import { Carousel } from 'flowbite-vue'
 </template>
 ```
 
-<CarouselExample />
+<CarouselDefaultExample />
+
+## Prop - controls
+
+```typescript
+const props = defineProps({
+    controls: {
+    type: Boolean,
+    default: true,
+    },
+})
+```
+
+<CarouselNoControlsExample />
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+</script>
+<template>
+  <Carousel :controls="false"></Carousel>
+</template>
+```
+## Prop - indicators
+
+```typescript
+const props = defineProps({
+    indicators: {
+        type: Boolean,
+        default: true,
+    },
+})
+```
+
+<CarouselNoIndicatorsExample />
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+</script>
+<template>
+  <Carousel :indicators="false"></Carousel>
+</template>
+```
+
+## Prop - slide
+
+```typescript
+const props = defineProps({
+    slide: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+<CarouselSlideExample />
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+</script>
+<template>
+  <Carousel :slide="true"></Carousel>
+</template>
+```
+
+## Prop - slide interval
+
+```typescript
+const props = defineProps({
+    slideInterval: {
+        type: Number,
+        default: 3000,
+    },
+})
+```
+
+<CarouselSlideIntervalExample />
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+</script>
+<template>
+  <Carousel :slide="true" :slide-interval="1000"></Carousel>
+</template>
+```
+
+## Prop - pictures
+
+```typescript
+const props = defineProps({
+    pictures: {
+        type: Array,
+        default() {
+            return [
+                {
+                    'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
+                    'alt': 'Picture 1',
+                },
+                {
+                    'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
+                    'alt': 'Picture 2',
+                },
+                {
+                    'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
+                    'alt': 'Picture 3',
+                },
+            ]
+        },
+    },
+})
+```
+
+<CarouselPicturesExample />
+
+```vue
+<script setup>
+import { Carousel } from 'flowbite-vue'
+const pictures = [
+  {
+    'src': 'https://i.picsum.photos/id/221/1920/1080.jpg?grayscale&hmac=GWPBzHGEhEh-BrPn1i-PuximCxLtUpKHcNwyACiTRHk',
+    'alt': 'Picture 1',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/608/1920/1080.jpg?grayscale&hmac=kkVc8-M3ovbO-sFr02WmRbrHx5YcfWmOtkP8rNF9fO4',
+    'alt': 'Picture 2',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/1012/1920/1080.jpg?grayscale&hmac=Zy9JmZ_sl88DXTF502k_0QqaeCyqjhkn60DjyE5F8Eo',
+    'alt': 'Picture 3',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/1004/1920/1080.jpg?grayscale&hmac=48C-T9K-36l8jpzJntPTu40OiDuXflIlG_YB-lQWYZI',
+    'alt': 'Picture 4',
+  },
+  {
+    'src': 'https://i.picsum.photos/id/244/1920/1080.jpg?grayscale&hmac=lLcfHciI-EqaOIHGB_Gab7OpUjVSmDLw6GOq6B5THak',
+    'alt': 'Picture 5',
+  },]
+</script>
+<template>
+  <Carousel :pictures="pictures"></Carousel>
+</template>
+```
\ No newline at end of file

From 568641fb43b8a4d2c17da4ceb7534e5a598f9b3d Mon Sep 17 00:00:00 2001
From: cadiyak <cadiyak@hotmail.fr>
Date: Sat, 27 Aug 2022 16:43:53 +0200
Subject: [PATCH 3/3] feat: reset carousel slide timeout when controls or
 indicators clicked

---
 src/components/Carousel/Carousel.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index 7045730..1da32dd 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -75,15 +75,22 @@ const props = defineProps({
 
 const currentPicture = ref(0)
 const direction = ref('')
+const interval = ref()
 
 const automaticSlide = () => {
-    setInterval(function() {
+    interval.value = setInterval(function() {
       nextPicture()
     }, props.slideInterval)
 }
 
+const resetInterval = () => {
+  clearInterval(interval.value)
+  automaticSlide()
+}
+
 const slideTo = (index: number) => {
   currentPicture.value = index
+  resetInterval()
 }
 
 const nextPicture = () => {
@@ -93,6 +100,7 @@ const nextPicture = () => {
     currentPicture.value = 0
   }
   direction.value = 'right'
+  resetInterval()
 }
 
 const previousPicture = () => {
@@ -102,6 +110,7 @@ const previousPicture = () => {
     currentPicture.value = props.pictures.length -1
   }
   direction.value = 'left'
+  resetInterval()
 }
 
 onMounted(() => {