fix: small fixes

Author: woothu

package.json

@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "next",
+    "@coreui/icons": "0.3.0",
     "core-js": "^2.5.7",
     "element-resize-detector": "^1.2.0",
     "popper.js": "^1.14.7",

src/components/Alert/CAlert.vue

@@ -1,6 +1,27 @@
+<template>
+  <transition :name="fade ? 'fade' : null" :appear="true">
+    <div
+      v-if="state"
+      :class="alertClasses"
+      role="alert"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <CButtonClose
+        v-if="dismissible && dismissible !== 'customButton' "
+        @click="dismiss()"
+        :iconHtml="iconHtml"
+        :disabled="this.dismissible === 'disabled'"
+      />
+      <slot :dismiss="dismiss">
+
+      </slot>
+    </div>
+  </transition>
+</template>
+
 <script>
 import CButtonClose from '../Button/CButtonClose'
-
 export default {
   name: 'CAlert',
   components: { CButtonClose },
@@ -9,7 +30,10 @@ export default {
       type: String,
       default: 'info'
     },
-    dismissible: [Boolean, String],
+    dismissible: {
+      type: [Boolean, String],
+      validator: val => [false, true, 'disabled', 'customButton']
+    },
     show: {
       type: [Boolean, Number],
       default: true
@@ -24,13 +48,14 @@ export default {
     }
   },
   computed: {
-    classObject () {
-      return ['c-alert',
-              {
-                'c-alert-dismissible': this.dismissible,
-                [`c-alert-${this.variant}`]: this.variant
-              }
-             ]
+    alertClasses () {
+      return [
+        'c-alert',
+        {
+          'c-alert-dismissible': this.dismissible,
+          [`c-alert-${this.variant}`]: this.variant
+        }
+      ]
     }
   },
   watch: {
@@ -42,7 +67,7 @@ export default {
     state: {
       immediate: true,
       handler (val, oldVal) {
-        if(val == oldVal) return
+        if (val == oldVal) return
 
         if (!val && oldVal) {
           this.clearCounter()
@@ -71,39 +96,30 @@ export default {
         this.countdownTimeout = null
       }
     }
-  },
-  render (h) {
-    if (!this.state) return h(false)
-
-    let dismissBtn = h(false)
-    if (this.dismissible) {
-      dismissBtn = h(
-        'CButtonClose',
-        {
-          on: { click: this.dismiss },
-          props: { iconHtml: this.iconHtml },
-          attrs: { disabled: this.dismissible === 'disabled'}
-        }
-      )
-    }
-    const alert = h(
-      'div',
-      {
-        class: this.classObject,
-        attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}
-      },
-      [dismissBtn, this.$scopedSlots.default({dismiss: this.dismiss})]
-    )
-    return !this.fade ? alert : h(
-      'transition',
-      { props: { name: 'fade', appear: true } },
-      [ alert ]
-    )
   }
 }
 </script>
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+  /* /deep/ .c-alert-dismissible .c-close {
+     position: absolute;
+     top: 0;
+     right: 0;
+     padding: 0.75rem 1.25rem;
+     color: inherit;
+   } */
+</style>
 
-
-<style scoped lang="scss">
-  @import "~@coreui/coreui/scss/partials/alert.scss";
+<style lang="scss">
+  div:not(.coreui-custom-styles) {
+    // .c-alert {
+    //   background-color: grey !important;
+    // }
+    @import "~@coreui/coreui/scss/partials/alert.scss";
+  }
 </style>

src/components/Button/CButton.vue

@@ -8,6 +8,7 @@ const btnProps = {
   pill: Boolean,
   square: Boolean,
   ghost: Boolean,
+  outline: Boolean,
   size: {
     type: String,
     validator: value => ['sm','lg'].includes(value)
@@ -38,7 +39,7 @@ function isToggle (props) {
 
 function computeClasses (props) {
   return [
-    `c-btn-${props.variant}`,
+    `c-btn-${props.outline ? 'outline-' : ''}${props.variant}`,
     props.pill ? 'c-btn-pill' : props.square ? 'c-btn-square' : '',
     {
       [`c-btn-${props.size}`]: Boolean(props.size),

src/components/Button/CButtonClose.vue

@@ -32,4 +32,5 @@ export default {
 
 <style scoped lang="scss">
   @import "~@coreui/coreui/scss/partials/buttons.scss";
+  @import "~@coreui/coreui/scss/partials/close.scss";
 </style>

src/components/Callout/CCallout.vue

@@ -1,5 +1,5 @@
 <template functional>
-  <div :class="`callout ${props.variant ? 'c-callout-' + props.variant : ''}`">
+  <div :class="`c-callout ${props.variant ? 'c-callout-' + props.variant : ''}`">
     <slot></slot>
   </div>
 </template>

src/components/Carousel/CCarousel.vue

@@ -15,11 +15,11 @@
       <slot name="arrows">
         <a class="c-carousel-control-prev" @click="previousItem">
           <span class="c-carousel-control-prev-icon"></span>
-          <span class="c-sr-only">Previous</span>
+          <span class="sr-only">Previous</span>
         </a>
         <a class="c-carousel-control-next" @click="nextItem">
           <span class="c-carousel-control-next-icon"></span>
-          <span class="c-sr-only">Next</span>
+          <span class="sr-only">Next</span>
         </a>
       </slot>
     </template>
@@ -54,7 +54,7 @@ export default {
     }
   },
   mounted () {
-    this.items = this.$slots.default.map(item => item.componentInstance)
+    this.items = this.$children
     const activated = this.items.map((item, index) => item.active ? index :null)
                                 .filter(item => item)
     this.active = activated[0] || 0
@@ -90,14 +90,19 @@ export default {
     activate (index, order) {
       this.resetInterval()
       this.activated = index
-      if (!order || this.animate) {
+      if (!order || !this.animate) {
         this.items.forEach(item => item.$emit('setItem', this.items[index]))
       } else {
         this.slide(index, order)
       }
     },
     slide (i, order) {
-      this.items.forEach(item => item.$emit('slideToItem', this.items[i], order))
+      this.items[i].$emit('slideToItem', this.items[i], order)
+      this.items.forEach((item, idx) => {
+        if (i !== idx) {
+          item.$emit('slideToItem', this.items[i], order)
+        }
+      })
       this.transitioning = true
       setTimeout(() => {
         this.transitioning = false

src/components/Carousel/CCarouselItem.vue

@@ -7,7 +7,7 @@
       class="c-d-block c-w-100 c-h-100 c-img-fluid"
     />
     <slot>
-      <div class="carousel-caption">
+      <div class="c-carousel-caption">
         <h3>{{caption}}</h3>
         <p>{{text}}</p>
       </div>
@@ -45,7 +45,7 @@ export default {
       return [
         'c-carousel-item',
         {
-          [`c-carousel-item-${this.order}`]: this.order,
+          [`c-carousel-item-${this.order}`]: this.order && !this.activated,
           [`c-carousel-item-${this.direction}`]: this.transitioning,
           'active': this.activated
         }

src/components/Form/CForm.vue

@@ -12,7 +12,7 @@ export default {
   },
   render(h, { props, data, children }) {
     return h(
-      'c-form',
+      'form',
       mergeData(data, {
         class: {
           'c-form-inline': props.inline,

src/components/ListGroup/CListGroup.vue

@@ -21,6 +21,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
   @import "~@coreui/coreui/scss/partials/list-group.scss";
 </style>

src/components/Modal/CModal.vue

@@ -132,8 +132,9 @@ export default {
   },
   watch: {
     visible (newVal, oldVal) {
-      if (newVal === oldVal) return
-      this.toggle(newVal)
+      if (newVal !== oldVal) {
+        this.toggle(newVal)
+      }
     }
   },
   methods: {
@@ -161,6 +162,7 @@ export default {
 <style scoped lang="scss">
   @import "~@coreui/coreui/scss/partials/modal.scss";
   @import "~@coreui/coreui/scss/partials/buttons.scss";
+  @import "~@coreui/coreui/scss/partials/close.scss";
   @import "~@coreui/coreui/scss/utilities/_borders.scss";
   @import "~@coreui/coreui/scss/utilities/_display.scss";
   @import "~@coreui/coreui/scss/utilities/_overflow.scss";