Flash Vue: new multiple flash version

New code is from  https://www.npmjs.com/package/vue-flash
But could not use the npm package as the `scoped` styles messed up mix `extractVueStyles`

resources/js/components/Flash.vue

@@ -1,65 +1,176 @@
 <template>
-  <div class="alert alert-flash"
-    :class="'alert-'+level"
-    role="alert"
-    v-show="show"
-    v-text="body">
+  <div class="alert-wrap" v-if="notifications.length > 0">
+    <transition-group :name="transition" tag="div">
+      <div :class="item.typeObject" role="alert" :key="item.id" v-for="item in notifications">
+        <span v-if="displayIcons" :class="item.iconObject"></span> <span v-html="item.message"></span>
+      </div>
+    </transition-group>
   </div>
 </template>
 
 <script>
+  /**
+   * New imporved multi flash - LWK 04/06/2020
+   * Thanks to laracasts and https://www.npmjs.com/package/vue-flash
+   * Could not use the npm package as the scoped styles messed up mix extractVueStyles
+   */
   export default {
-    props: ['message'],
+    props: {
+      timeout: {
+        type: Number,
+        default: 3000
+      },
+      transition: {
+        type: String,
+        default: 'slide-fade'
+      },
+      types: {
+        type: Object,
+        default: () => ({
+          base:    'alert',
+          success: 'alert-success',
+          error:   'alert-danger',
+          warning: 'alert-warning',
+          info:    'alert-info'
+        })
+      },
+      displayIcons: {
+        type: Boolean,
+        default: false
+      },
+      icons: {
+        type: Object,
+        default: () => ({
+          base:    'fa',
+          error:   'fa-exclamation-circle',
+          success: 'fa-check-circle',
+          info:    'fa-info-circle',
+          warning: 'fa-exclamation-circle',
+        })
+      },
+    },
 
     data() {
       return {
-        body: this.message,
-        level: 'success',
-        show: false
-      }
+        notifications: [],
+      };
     },
 
+    /**
+     * On creation Flash a message if a message exists otherwise listen for
+     * flash event from global event bus
+     */
     created() {
-      if (this.message) {
-        this.flash();
-      }
-
       window.events.$on(
-        'flash', data => this.flash(data)
+        'flash', (message, type) => this.flash(message, type)
         );
     },
 
     methods: {
-      flash(data) {
-        if (data) {
-          this.body = data.message;
-          this.level = data.level;
-        }
+      /**
+       * Flash our alert to the screen for the user to see
+       * and begin the process to hide it
+       *
+       * @param message
+       * @param type
+       */
+      flash(message, type) {
+        this.notifications.push({
+          id: Math.random().toString(36).substr(2, 9),
+          message: message,
+          type: type,
+          typeObject: this.classes(this.types, type),
+          iconObject: this.classes(this.icons, type)
+        });
+        setTimeout(this.hide, this.timeout);
+      },
 
-        this.show = true;
+      /**
+       * Sets and returns the values needed
+       *
+       * @param type
+       */
+      classes(propObject, type) {
+        let classes = {};
+
+        if(propObject.hasOwnProperty('base')) {
+          classes[propObject.base] = true;
+        }
+        if (propObject.hasOwnProperty(type)) {
+          classes[propObject[type]] = true;
+        }
 
-        this.hide();
+        return classes;
       },
 
-      hide() {
-        setTimeout(() => {
-          this.show = false;
-        }, 3000);
+      /**
+       * Hide Our Alert
+       *
+       * @param item
+       */
+      hide(item = this.notifications[0]) {
+        let key = this.notifications.indexOf(item);
+        this.notifications.splice(key, 1);
       }
-    }
-  };
+    },
+  }
 </script>
 
 <style lang="scss">
 /*
  * Flash.vue
  */
 
-.alert-flash {
+.alert-wrap {
   position: fixed;
   right: 25px;
   bottom: 25px;
-  z-index: 1070;
+  z-index:9999;
+}
+
+/**
+ * Fade transition styles
+ */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0
+}
+
+/**
+ * Bounce transition styles
+ */
+.bounce-enter-active {
+  animation: bounce-in .5s;
+}
+.bounce-leave-active {
+  animation: bounce-in .5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
+/**
+ * Slide transition styles
+ */
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+.slide-fade-leave-active {
+  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+.slide-fade-enter, .slide-fade-leave-to
+  /* .slide-fade-leave-active for <2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
 </style>

resources/js/vue.js

@@ -19,7 +19,7 @@ Vue.use(UniqueId);
 window.events = new Vue();
 
 window.flash = function (message, level = 'success') {
-    window.events.$emit('flash', { message, level });
+    window.events.$emit('flash', message, level);
 };
 
 /**

resources/views/layouts/app.blade.php

@@ -51,7 +51,7 @@
 @yield('content')
       </div>
     </div>
-    <flash message="{{ session('flash') }}"></flash>
+    <flash></flash>
   </main>
   <!-- main body end -->
 

webpack.mix.js

@@ -16,6 +16,7 @@ const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 mix.sourceMaps()
    .webpackConfig({
+        // devtool: 'source-map',
         plugins: [
             new MomentLocalesPlugin(), // To strip all locales except “en”
             new WebpackShellPluginNext({