Merge branch 'feature/missing-plugin' into develop

Author: adenvt

.eslintrc

@@ -44,9 +44,12 @@
         "on": "colon"
       }
     }],
-    "vue/require-default-prop": "warning",
-    "vue/require-prop-types": "warning",
-    "vue/prop-name-casing": ["error", "camelCase"]
+    "vue/require-default-prop": "off",
+    "vue/require-prop-types": "off",
+    "vue/prop-name-casing": ["error", "camelCase"],
+    "unicorn/catch-error-name": ["error", {
+      "name": "err"
+    }]
   },
   "overrides": [{
     "files": ["resources/assets/js/coreui/**/*.vue"],

package-lock.json

@@ -36,6 +36,7 @@
     "stylelint-scss": "^3.1.3"
   },
   "dependencies": {
+    "animate.css": "^3.6.1",
     "axios": "^0.18",
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",
@@ -48,7 +49,9 @@
     "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"
   },
   "pre-commit": [

package.json

@@ -11,9 +11,36 @@ window.Vue = require('vue')
 try {
   window.$ = window.jQuery = require('jquery')
 
+  // Animate CSS
+  window.$.fn.extend({
+    animateCss: function (animationName, callback) {
+      const animationEnd = (function (el) {
+        const animations = {
+          animation      : 'animationend',
+          OAnimation     : 'oAnimationEnd',
+          MozAnimation   : 'mozAnimationEnd',
+          WebkitAnimation: 'webkitAnimationEnd',
+        }
+
+        for (const t in animations) {
+          if (el.style[t] !== undefined)
+            return animations[t]
+        }
+      })(document.createElement('div'))
+
+      this.addClass(`animated ${animationName}`).one(animationEnd, function () {
+        $(this).removeClass(`animated ${animationName}`)
+
+        if (typeof callback === 'function') callback()
+      })
+
+      return this
+    },
+  })
+
   require('bootstrap')
-} catch (error) {
-  console.error(error)
+} catch (err) {
+  console.error(err)
 }
 
 /**

public/mix-manifest.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/bootstrap.js

@@ -2,11 +2,29 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 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,
+  props  : {
+    bootstrapStyling: {
+      type   : Boolean,
+      default: true,
+    },
+    language: {
+      type   : Object,
+      default: () => id,
+    },
+  },
+})
 
 window.Vue = new Vue({
   el        : '#app',

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

@@ -162,6 +162,13 @@
               type="date"
               id="date"/>
           </b-form-group>
+          <b-form-group
+            label="Datepicker"
+            :label-cols="3"
+            :horizontal="true">
+            <b-datepicker
+              v-model="datepicker"/>
+          </b-form-group>
           <b-form-group
             description="Please enter your email"
             label="Email Input"
@@ -1462,7 +1469,8 @@ export default {
   name: 'Forms',
   data () {
     return {
-      selected: [], // Must be an array reference!
+      selected  : [], // Must be an array reference!
+      datepicker: new Date(),
     }
   },
   methods: {

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/base/Forms.vue

@@ -19,6 +19,7 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 @import '~font-awesome/css/font-awesome.min.css';
 @import '~simple-line-icons/css/simple-line-icons.css';
 @import '~flag-icon-css/css/flag-icon.min.css';
+@import '~animate.css/animate.min.css';
 
 // Import Other CSS Module
 
@@ -30,3 +31,4 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 
 // Custom styles
 @import 'custom';
+@import 'vendors/vue-notification/notification';