add vue-notification

Author: adenvt

package-lock.json

@@ -49,6 +49,7 @@
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.3.2",
+    "vue-notification": "^1.3.10",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^1.5.2",
     "vuex": "^3.0.1"

package.json

@@ -3,6 +3,9 @@
     <AppHeader/>
     <div class="app-body">
       <Sidebar :nav-items="nav"/>
+      <notifications
+        class="custom-notifications"
+        :style="{ 'margin-top': offset }" />
       <main class="main">
         <breadcrumb :list="list"/>
         <div class="container-fluid">
@@ -30,7 +33,8 @@ export default {
   },
   data () {
     return {
-      nav: nav.items,
+      nav   : nav.items,
+      offset: true,
     }
   },
   computed: {
@@ -41,5 +45,19 @@ export default {
       return this.$route.matched
     },
   },
+  methods: {
+    setPosNotify () {
+      const top = $(document).scrollTop()
+      const offset = top < 55 ? 55 - top : 0
+
+      this.offset = `${offset}px`
+    },
+  },
+  mounted () {
+    $(window).on('scroll', this.setPosNotify)
+  },
+  beforeDestroy () {
+    $(window).off('scroll', this.setPosNotify)
+  },
 }
 </script>

resources/assets/js/coreui/containers/Full.vue

@@ -4,11 +4,13 @@ import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
 import Datepicker from 'vuejs-datepicker'
 import { id } from 'vuejs-datepicker/dist/locale'
+import Notifications from 'vue-notification'
 import App from './App'
 import router from './router'
 import store from './store'
 
 Vue.use(BootstrapVue)
+Vue.use(Notifications)
 
 Vue.component('b-datepicker', {
   extends: Datepicker,

resources/assets/js/coreui/main.js

@@ -209,6 +209,32 @@
             </div>
           </b-card>
         </b-col>
+        <b-col
+          cols="12"
+          md="6">
+          <b-card
+            header-tag="header"
+            footer-tag="footer">
+            <div slot="header">
+              <i class="fa fa-align-justify"/> Alerts <small>with <b>Vue Notification</b></small>
+            </div>
+            <b-button
+              variant="success"
+              @click="showNotify('success')">
+              Success
+            </b-button>
+            <b-button
+              variant="warning"
+              @click="showNotify('warning')">
+              Warning
+            </b-button>
+            <b-button
+              variant="danger"
+              @click="showNotify('danger')">
+              Danger
+            </b-button>
+          </b-card>
+        </b-col>
       </b-row>
     </div>
   </div>
@@ -231,6 +257,13 @@ export default {
     showAlert () {
       this.dismissCountDown = this.dismissSecs
     },
+    showNotify (type) {
+      this.$notify({
+        type,
+        title: 'Important message',
+        text : 'Hello user! This is a notification!',
+      })
+    },
   },
 }
 </script>

resources/assets/js/coreui/views/notifications/Alerts.vue

@@ -31,3 +31,4 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 
 // Custom styles
 @import 'custom';
+@import 'vendors/vue-notification/notification';

resources/assets/sass/coreui/style.scss

@@ -0,0 +1,11 @@
+.vue-notification {
+  &.warning {
+    background: #ffb648;
+    border-left-color: #f48a06;
+  }
+
+  &.danger {
+    background: #E54D42;
+    border-left-color: #B82E24;
+  }
+}