feat: Add CCarousel and CCarosuelItem components

Author: woothu

README.md

@@ -1,4 +1,4 @@
-# @coreui/vue 
+# @coreui/vue
 
 [![Npm badge](https://img.shields.io/npm/v/@coreui/vue.svg)][npm]
 [![NPM downloads][npm-download]][npm]
@@ -9,9 +9,9 @@
 [npm]: https://www.npmjs.com/package/@coreui/vue
 [npm-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square
 
-> A [@coreui/vue](https://coreui.io/vue) `v2` library project
+> A [@coreui/vue](https://coreui.io/vue) `v3` library project
 
-for use with [CoreUI](https://coreui.io/vue/) `v2` Open Source Bootstrap Admin Template
+for use with [CoreUI](https://coreui.io/vue/) `v3-alpha` Open Source Bootstrap Admin Template
 
 ## Installation
 ```
@@ -21,17 +21,17 @@ npm install @coreui/vue
 
 When in non-modular environment, @coreui/vue will register all the components to vue by itself.</p>
 
-### ES6 
+### ES6
 ```js
 //
 // You can register a component manually
 //
-import { Switch } from '@coreui/vue';
+import { CSwitch } from '@coreui/vue';
 
 export default {
   ...
   components: {
-    Switch
+    CSwitch
   },
   ...
 };

src/components/Carousel/CCarousel.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="carousel slide" >
+    <ol v-if="!noIndicators" :class="indicatorClasses">
+      <li
+        v-for="(index, key) in itemsLength"
+        @click="setSlide(key)"
+        :class="{'active' : active === key}"
+        :key="key"
+      ></li>
+    </ol>
+    <div class="carousel-inner">
+      <slot></slot>
+    </div>
+    <template v-if="!noArrows">
+      <a class="carousel-control-prev" @click="previousSlide">
+        <span class="carousel-control-prev-icon"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="carousel-control-next" @click="nextSlide">
+        <span class="carousel-control-next-icon"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CCarousel',
+  props: {
+    interval: {
+      type: Number,
+      default: 4000
+    },
+    noAnimation: Boolean,
+    noIndicators: Boolean,
+    noArrows: Boolean,
+    indicatorClasses: {
+      type: [String, Array],
+      default: 'carousel-indicators'
+    },
+  },
+  data () {
+    return {
+      active: 0,
+      itemsLength: null,
+      currentInterval: null,
+      transitioning: null
+    }
+  },
+  mounted () {
+    this.itemsLength = this.$children.length
+    this.$children.forEach((item, index) => item.index = index)
+    const activeItem = this.$children.filter(item => item.active)
+    if (activeItem[0]) {
+      this.active = activeItem[0].index || 0
+    } else {
+      this.$children[0].classes = 'active'
+    }
+    this.menageInterval()
+  },
+  methods: {
+    menageInterval () {
+      if (this.noAnimation) return
+
+      clearInterval(this.currentInterval)
+      this.currentInterval = setInterval(() => {
+        this.nextSlide()
+      }, this.interval)
+    },
+    nextSlide () {
+      let index = this.active === this.itemsLength - 1 ? 0 : this.active + 1
+      this.setSlide(index, 'left')
+    },
+    previousSlide () {
+      let index = this.active === 0 ? this.itemsLength -1  : this.active - 1
+      this.setSlide(index, 'right')
+    },
+    setSlide (index, direction = null) {
+      if (index === this.active) {
+        return this.menageInterval()
+      }
+      direction === null ? direction = this.active < index ? 'left' : 'right' : ''
+      if (this.noAnimation) {
+        this.$children[this.active].classes = ''
+        this.$children[index].classes = 'active'
+        this.active = index
+      } else if (!this.transitioning) {
+        this.slide(index, direction)
+      }
+    },
+    slide (index, direction) {
+      this.menageInterval()
+      let oldIndex = this.active
+      this.active = index
+      const order = direction === 'right' ? 'prev' : 'next'
+      const orderClass = `carousel-item-${order}`
+      const directionClass = `carousel-item-${direction}`
+      const activeEl = this.$children[oldIndex].$el
+      const nextEl = this.$children[index].$el
+      setTimeout(() =>{
+        nextEl.classList.add(orderClass)
+        nextEl.offsetHeight
+        nextEl.classList.add(directionClass)
+        activeEl.classList.add(directionClass)
+      }, 0)
+
+      this.transitioning = setTimeout(() => {
+        this.transitioning = null
+        nextEl.classList.remove(orderClass)
+        nextEl.classList.remove(directionClass)
+        activeEl.classList.remove(directionClass)
+        this.$children[oldIndex].classes = ''
+        this.$children[index].classes = 'active'
+      }, 600)
+    }
+  }
+
+}
+</script>

src/components/Carousel/CCarouselItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="carousel-item" :class="classes">
+    <img v-if="imgSrc" :src="imgSrc" class="d-block w-100 h-100 img-fluid"/>
+    <slot>
+      <div class="carousel-caption">
+        <h3>{{caption}}</h3>
+        <p>{{text}}</p>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import CImage from '../Image/CImage'
+export default {
+  name: 'CCarouselItem',
+  props: {
+    imgSrc: String,
+    caption: String,
+    text: String,
+    active: Boolean,
+  },
+  data () {
+    return {
+      classes: this.active ? 'active' : ''
+    }
+  }
+}
+</script>

src/components/Carousel/index.js

@@ -0,0 +1,7 @@
+import CCarousel from './CCarousel'
+import CCarouselItem from './CCarouselItem'
+
+export {
+  CCarousel,
+  CCarouselItem
+}

src/components/index.js

@@ -4,6 +4,7 @@ export * from './Badge'
 export * from './Breadcrumb'
 export * from './Button'
 export * from './Callout'
+export * from './Carousel'
 export * from './Card'
 export * from './Charts'
 export * from './Collapse'