add sweat alert 2 (swal)

Author: adenvt

package-lock.json

@@ -51,6 +51,7 @@
     "vue-chartjs": "^3.3.2",
     "vue-notification": "^1.3.10",
     "vue-router": "^3.0.1",
+    "vue-sweetalert2": "^1.4.2",
     "vuejs-datepicker": "^1.5.2",
     "vuex": "^3.0.1"
   },

package.json

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

resources/assets/js/coreui/main.js

@@ -233,6 +233,56 @@
               @click="showNotify('danger')">
               Danger
             </b-button>
+            <p class="mt-3">
+              See
+              <a href="http://vue-notification.yev.io/">
+                Documentations
+              </a>
+              for more information
+            </p>
+          </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>Sweat Alert 2</b></small>
+            </div>
+            <b-button
+              variant="success"
+              @click="showSwal('success')">
+              Success
+            </b-button>
+            <b-button
+              variant="warning"
+              @click="showSwal('warning')">
+              Warning
+            </b-button>
+            <b-button
+              variant="danger"
+              @click="showSwal('error')">
+              Error
+            </b-button>
+            <b-button
+              variant="info"
+              @click="showSwal('info')">
+              Info
+            </b-button>
+            <b-button
+              variant="secondary"
+              @click="showSwal('question')">
+              Question
+            </b-button>
+            <p class="mt-3">
+              See
+              <a href="https://sweetalert2.github.io/">
+                Documentations
+              </a>
+              for more information
+            </p>
           </b-card>
         </b-col>
       </b-row>
@@ -264,6 +314,9 @@ export default {
         text : 'Hello user! This is a notification!',
       })
     },
+    showSwal (type) {
+      this.$swal('Hello Vue world!!!', 'This is Sweat Alert', type)
+    },
   },
 }
 </script>