refactor: CToast and CToaster changes

- disable inheriting bodyHtml and titleHtml props from CToaster,
- rename titleHtml to headerHtml,
- render default slot inside toast-body wrapper,
- avoid setting hide state when initializing,
- rename nagative props,
- update tests and typings

Author: woothu

src/components/Toast/CToast.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition :name="!props.noFade ? 'fade' : null" appear> 
+  <transition :name="props.fade ? 'fade' : null" appear> 
     <div
       v-show="isShowed"
       :class="toastClasses"
@@ -8,19 +8,20 @@
       aria-atomic="true"
       :style="computedStyles"
     >
-      <div v-if="!props.noHeader" class="toast-header">
-        <slot name="title" :close="close">
-          <strong class="mr-auto" v-html="props.titleHtml"></strong>
+      <div v-if="props.hasHeader" class="toast-header">
+        <slot name="header">
+          <strong class="mr-auto" v-html="props.headerHtml"></strong>
         </slot>
         <CButtonClose
-          v-if="!props.noCloseButton"
+          v-if="props.closeButton"
           @click="close()"
           class="ml-2 mb-1"
         />
       </div>
-      <slot>
-        <div class="toast-body" v-html="props.bodyHtml"></div>
-      </slot>
+      <div v-if="$slots.default" class="toast-body">
+        <slot></slot>
+      </div>
+      <div v-else class="toast-body" v-html="props.bodyHtml"></div>
     </div>
   </transition>
 </template>
@@ -33,7 +34,9 @@ export default {
   name: 'CToast',
   mixins: [ toastMixin ],
   props: {
-    show: Boolean
+    show: Boolean,
+    headerHtml: String,
+    bodyHtml: String
   },
   components: {
     CButtonClose
@@ -96,12 +99,16 @@ export default {
       })
     },
     close (restoreOnHover = false) {
+      if (this.isShowed === false) {
+        return
+      }
+      
       this.isShowed = false
       this.$emit('update:show', false)
       this.$el.removeEventListener('mouseout', this.onHoverOut)
       this.$el.removeEventListener('mouseover', this.onHover)
 
-      if (!this.props.noFade) {
+      if (this.props.fade) {
         this.setHiddingMode(restoreOnHover)
       }
     },

src/components/Toast/tests/CToast.spec.js

@@ -5,7 +5,7 @@ const ComponentName = 'CToast'
 const wrapper = mount(Component, {
   propsData: {
     show: true,
-    noFade: true,
+    fade: false,
     position: 'static'
   }
 })
@@ -14,10 +14,10 @@ const customWrapper = mount(Component, {
   propsData: {
     show: true,
     position: 'bottom-center',
-    titleHtml: 'title',
+    headerHtml: 'title',
     noHeader: false,
     autohide: 10,
-    noCloseButton: false
+    closeButton: true
   },
   slots: {
     default: 'CToast body'
@@ -31,7 +31,7 @@ describe(ComponentName, () => {
   it('renders correctly', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
-  it('renders correctly', () => {
+  it('renders correctly custom wrapper', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
   it('closes by watcher correctly', () => {

src/components/Toast/tests/CToaster.spec.js

@@ -5,19 +5,22 @@ const ComponentName = 'CToaster'
 
 const toast = {
   render (h) {
-    return h(CToast, { props: { show: true } }, 'toast body');
+    return h(
+      CToast, 
+      { props: { show: true, headerHtml: 'toast header'} }, 
+      'toast body'
+    )
   }
 }
 
 const defaultWrapper = mount(Component)
-const customWrapper2 = mount(Component, {
+const customWrapper = mount(Component, {
   propsData: {
     position: 'top-left',
-    titleHtml: 'title',
-    noHeader: false,
+    hasHeader: false,
     autohide: 3000,
-    noCloseButton: false,
-    noFade: false
+    closeButton: false,
+    fade: false
   },
   slots: {
     default: toast
@@ -31,7 +34,7 @@ describe(ComponentName, () => {
   it('renders correctly', () => {
     expect(defaultWrapper.element).toMatchSnapshot()
   })
-  it('renders correctly', () => {
-    expect(customWrapper2.element).toMatchSnapshot()
+  it('renders correctly custom wrapper', () => {
+    expect(customWrapper.element).toMatchSnapshot()
   })
 })

src/components/Toast/tests/__snapshots__/CToast.spec.js.snap

@@ -30,7 +30,7 @@ exports[`CToast renders correctly 1`] = `
 </div>
 `;
 
-exports[`CToast renders correctly 2`] = `
+exports[`CToast renders correctly custom wrapper 1`] = `
 <div
   appear=""
   aria-atomic="true"
@@ -45,9 +45,7 @@ exports[`CToast renders correctly 2`] = `
   >
     <strong
       class="mr-auto"
-    >
-      title
-    </strong>
+    />
      
     <button
       aria-label="Close"
@@ -57,6 +55,11 @@ exports[`CToast renders correctly 2`] = `
       ×
     </button>
   </div>
-   CToast body
+   
+  <div
+    class="toast-body"
+  >
+    CToast body
+  </div>
 </div>
 `;

src/components/Toast/tests/__snapshots__/CToaster.spec.js.snap

@@ -7,7 +7,7 @@ exports[`CToaster renders correctly 1`] = `
 />
 `;
 
-exports[`CToaster renders correctly 2`] = `
+exports[`CToaster renders correctly custom wrapper 1`] = `
 <div
   class="toaster"
   style="z-index: 1100; min-width: 350px; position: fixed; top: 0px; left: 0px;"
@@ -17,27 +17,15 @@ exports[`CToaster renders correctly 2`] = `
     aria-atomic="true"
     aria-live="assertive"
     class="toast"
-    name="fade"
     role="alert"
   >
+    <!---->
+     
     <div
-      class="toast-header"
+      class="toast-body"
     >
-      <strong
-        class="mr-auto"
-      >
-        title
-      </strong>
-       
-      <button
-        aria-label="Close"
-        class="ml-2 mb-1 close"
-        type="button"
-      >
-        ×
-      </button>
+      toast body
     </div>
-     toast body
   </div>
 </div>
 `;

src/components/Toast/toastMixin.js

@@ -10,15 +10,22 @@ export default {
         ].includes(position)
       }
     },
-    titleHtml: String,
-    bodyHtml: String,
-    noHeader: Boolean,
+    hasHeader: {
+      type: Boolean,
+      default: true
+    },
     autohide: {
       type: [Number, Boolean],
       validator: val => typeof val === 'number' || val === false
     },
-    noCloseButton: Boolean,
-    noFade: Boolean
+    closeButton: {
+      type: Boolean,
+      default: true
+    },
+    fade: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     computedStyles () {

src/components/index.d.ts

@@ -583,16 +583,16 @@ export declare class CTab extends Vue {
 
 declare class ToastProps extends Vue {
   position: string
-  titleHtml: string
-  bodyHtml: string
-  noHeader: boolean
+  hasHeader: boolean
   autohide: number
-  noCloseButton: boolean
-  noFade: boolean
+  closeButton: boolean
+  fade: boolean
 }
 
 export declare class CToast extends ToastProps {
   show: boolean
+  headerHtml: string
+  bodyHtml: string
 }
 
 export declare class CToaster extends ToastProps {