refactor: CToast and CToaster components refactor:

- delete style attribute,
- disable fixed toasts without toaster,
- add new styles,
- delete reverse prop

Author: woothu

src/components/toast/CToast.vue

@@ -6,7 +6,6 @@
       role="alert"
       aria-live="assertive"
       aria-atomic="true"
-      :style="computedStyles"
     >
       <div 
         v-if="header !== undefined || $slots.header" 
@@ -29,16 +28,16 @@
 </template>
 
 <script>
-import toastMixin from './toast-mixin'
+import { props } from './toast-props'
 import CButtonClose from '../button/CButtonClose'
 
 export default {
   name: 'CToast',
-  mixins: [ toastMixin ],
   components: {
     CButtonClose
   },
   props: {
+    ...props,
     show: Boolean,
     header: String
   },
@@ -69,8 +68,7 @@ export default {
       return [
         'toast',
         {
-          'show': this.isShowed || this.hidding,
-          'toast-full': this.props.position.includes('full'),
+          'show': this.isShowed,
         }
       ]
     },
@@ -81,7 +79,7 @@ export default {
       return this.toaster && this.toaster.props ? this.toaster.props : {}
     },
     props () {
-      return Object.keys(toastMixin.props).reduce((computedProps, key) => {
+      return Object.keys(props).reduce((computedProps, key) => {
         const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
         const parentPropExists = this.injectedProps[key] !== undefined
         const propIsInherited = parentPropExists && !propIsDirectlyDeclared

src/components/toast/CToaster.vue

@@ -1,14 +1,11 @@
 <template>
-  <div
-    :class="toasterClasses"
-    :style="computedStyles"
-  >
+  <div :class="toasterClasses">
     <slot></slot>
   </div>
 </template>
 
 <script>
-import toastMixin from './toast-mixin'
+import { props } from './toast-props'
 
 export default {
   name: 'CToaster',
@@ -19,18 +16,25 @@ export default {
     })
     return { toaster }
   },
-  mixins: [ toastMixin ],
   props: {
-    reverse: {
-      type: Boolean,
-      default: true
+    ...props,
+    position: {
+      type: String,
+      default: 'top-right',
+      validator: position => {
+        return [
+          '', 'static', 'top-right', 'top-left', 'top-center', 'top-full',
+          'bottom-right', 'bottom-left', 'bottom-center', 'bottom-full'
+        ].includes(position)
+      }
     }
   },
   computed: {
     toasterClasses () {
+      const hasFixedPosition = this.position && this.position !== 'static'
       return [
         'toaster',
-        { 'toaster-reverse': !this.reverse }
+        { [`toaster-${this.position}`]: hasFixedPosition }
       ]
     }
   }

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

@@ -64,15 +64,4 @@ describe(ComponentName, () => {
   //     done()
   //   }, 25)
   // })
-  it('properly changes position', () => {
-    const stylesIncludes = (string) => {
-      return JSON.stringify(customWrapper.vm.computedStyles).includes(string)
-    }
-
-    customWrapper.setProps({ position: 'top-left'})
-    expect(stylesIncludes('"top":0')).toBe(true)
-
-    customWrapper.setProps({ position: 'top-full'})
-    expect(stylesIncludes('"right":0,"left":0')).toBe(true)
-  })
 })

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

@@ -6,6 +6,7 @@ exports[`CToast renders correctly 1`] = `
   aria-atomic="true"
   aria-live="assertive"
   class="toast show"
+  position="static"
   role="alert"
   style=""
 >
@@ -24,8 +25,9 @@ exports[`CToast renders correctly custom wrapper 1`] = `
   aria-live="assertive"
   class="toast show"
   name="fade"
+  position="bottom-center"
   role="alert"
-  style="z-index: 1100; min-width: 350px; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%);"
+  style=""
 >
   <div
     class="toast-header"

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

@@ -2,15 +2,13 @@
 
 exports[`CToaster renders correctly 1`] = `
 <div
-  class="toaster"
-  style="z-index: 1100; min-width: 350px; position: fixed; top: 0px; right: 0px;"
+  class="toaster toaster-top-right"
 />
 `;
 
 exports[`CToaster renders correctly custom wrapper 1`] = `
 <div
-  class="toaster"
-  style="z-index: 1100; min-width: 350px; position: fixed; top: 0px; left: 0px;"
+  class="toaster toaster-top-left"
 >
   <div
     appear=""

src/components/toast/toast-mixin.js

@@ -0,0 +1,14 @@
+export const props = {
+  autohide: {
+    type: [Number, Boolean],
+    validator: val => typeof val === 'number' || val === false
+  },
+  closeButton: {
+    type: Boolean,
+    default: true
+  },
+  fade: {
+    type: Boolean,
+    default: true
+  }
+}