refactor: CToast, CToaster

- enable CToast display manipulation by 'show' prop,
- fix props inheritance,
- remove broken animation system (to rework),
- add min-width to toast and toaster,
- fix z-index

Author: woothu

src/components/Toast/CToast.vue

@@ -1,40 +1,39 @@
 <template>
-  <transition
-    :name="0 ? null : 'fade'"
-    :appear="true"
-    v-if="!isClosed"
+  <div
+    :class="toastClasses"
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+    :style="computedStyles"
+    v-if="isShowed"
   >
-    <div
-      :class="[toastClasses]"
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-      style="z-index:1100"
-      :style="computedStyles"
-    >
-      <div v-if="!props.noHeader" class="c-toast-header">
+    <div v-if="!props.noHeader" class="c-toast-header">
+      <slot name="title">
         <strong class="c-mr-auto" v-html="props.titleHtml"></strong>
-        <CButtonClose
-          v-if="!props.noCloseButton"
-          @click="close()"
-          class="c-ml-2 c-mb-1"
-        />
-      </div>
-      <slot :close="close">
-        <div class="c-toast-body" v-html="props.bodyHtml">
-        </div>
       </slot>
+      <CButtonClose
+        v-if="!props.noCloseButton"
+        @click="close()"
+        class="c-ml-2 c-mb-1"
+      />
     </div>
-  </transition>
+    <slot>
+      <div class="c-toast-body" v-html="props.bodyHtml"></div>
+    </slot>
+  </div>
 </template>
 
 <script>
 import toastMixin from './toastMixin'
 import CButtonClose from '../Button/CButtonClose'
+const props = Object.assign({}, toastMixin.props, {
+  show: Boolean
+})
 
 export default {
   name: 'CToast',
   mixins: [ toastMixin ],
+  props,
   components: {
     CButtonClose
   },
@@ -45,37 +44,52 @@ export default {
   },
   data () {
     return {
-      isClosed: false,
+      isShowed: this.show,
       timeout: null
     }
   },
+  watch: {
+    show (val) {
+      this.isShowed = val
+    }
+  },
   mounted () {
     if (this.props.autohide) {
       this.setAutohide()
     }
   },
   computed: {
     toastClasses () {
-      return ['c-toast',
+      return [
+        'c-toast',
         {
-          'c-show': this.props.show,
+          'c-show': this.isShowed,
           'c-full': this.props.position.includes('full')
         }
       ]
     },
+    directlyDeclaredProps () {
+      return Object.keys(this.$options.propsData)
+    },
+    injectedProps () {
+      return this.toaster && this.toaster.props ? this.toaster.props : {}
+    },
     props () {
-      return Object.keys(toastMixin.props).reduce((props, key) => {
-        const propUndefined = !Object.keys(this.$options.propsData).includes(key)
-        const propInheritedFromToaster = propUndefined && this.toaster.props[key]
-        props[key] = propInheritedFromToaster ? this.toaster.props[key] : this[key]
-        return props
+      return Object.keys(toastMixin.props).reduce((computedProps, key) => {
+        const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
+        const parentPropExists = this.injectedProps[key] !== undefined
+        const propIsInherited = parentPropExists && !propIsDirectlyDeclared
+        computedProps[key] = propIsInherited ? this.injectedProps[key] : this[key]
+        return computedProps
       }, {})
     }
   },
   methods: {
     close () {
-      this.isClosed = true
+      this.isShowed = false
+      this.$emit('update:show', false)
       this.$el.removeEventListener('mouseover', this.onHover)
+      this.$el.removeEventListener('mouseout', this.onHoverOut)
     },
     onHover () {
       this.$el.removeEventListener('mouseover', this.onHover)
@@ -100,12 +114,6 @@ export default {
   .toast.full {
     max-width: 100%;
   }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .3s;
-  }
   @import "~@coreui/coreui/scss/partials/toasts.scss";
   @import "~@coreui/coreui/scss/utilities/_spacing.scss";
 

src/components/Toast/CToaster.vue

@@ -9,6 +9,7 @@
 
 <script>
 import toastMixin from './toastMixin'
+
 export default {
   name: 'CToaster',
   provide () {
@@ -34,9 +35,6 @@ export default {
 </script>
 
 <style lang="scss">
-.toaster {
-  z-index: 1100
-}
 @import "~@coreui/coreui/scss/partials/toasts.scss";
 @import "~@coreui/coreui/scss/utilities/_flex.scss";
 </style>

src/components/Toast/toastMixin.js

@@ -10,24 +10,19 @@ export default {
         ].includes(position)
       }
     },
-    show: Boolean,
-    autohide: Number,
+    titleHtml: String,
+    bodyHtml: String,
     noHeader: Boolean,
-    titleHtml: {
-      type: String,
-      default: 'CToast component'
-    },
-    bodyHtml: {
-      type: String,
-      default: 'Hello, world! This is a <b>toast</b> message.'
-    },
+    autohide: Number,
     noCloseButton: Boolean
   },
   computed: {
     computedStyles () {
       const position = this.props ? this.props.position : this.position
       if (position !== 'static' && !this.toaster) {
         return [
+          { 'z-index': 1100 },
+          { 'min-width': '350px' },
           { position: 'fixed' },
           this.getVerticalPosition(this.position),
           this.getHorizontalPosition(this.position)
@@ -37,11 +32,7 @@ export default {
   },
   methods: {
     getVerticalPosition (position) {
-      if (position.includes('bottom')) {
-        return { bottom: 0 }
-      } else {
-        return { top: 0 }
-      }
+      return position.includes('bottom') ? { bottom: 0 } : { top: 0 }
     },
     getHorizontalPosition (position) {
       if (position.includes('right')) {