add vue loading spinner

Author: adenvt

package-lock.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "babel-plugin-wildcard": "^5.0.0",
+    "babel-preset-stage-2": "^6.24.1",
     "cross-env": "^5.1",
     "eslint": "^5.0.1",
     "eslint-config-standard": "^11.0.0",
@@ -49,6 +50,7 @@
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.3.2",
+    "vue-loading-spinner": "^1.0.11",
     "vue-notification": "^1.3.10",
     "vue-router": "^3.0.1",
     "vue-sweetalert2": "^1.4.2",

package.json

@@ -1,15 +1,17 @@
-window._ = require('lodash')
-window.Popper = require('popper.js').default
-window.Vue = require('vue')
-
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
  * for JavaScript based Bootstrap features such as modals and tabs. This
  * code may be modified to fit the specific needs of your application.
  */
 
 try {
+  window._ = require('lodash')
   window.$ = window.jQuery = require('jquery')
+  window.Popper = require('popper.js').default
+  window.Vue = require('vue')
+
+  // Lodash Improvement
+  window._.mixin({ pascalCase: _.flow(_.camelCase, _.upperFirst) })
 
   // Animate CSS
   window.$.fn.extend({

resources/assets/js/bootstrap.js

@@ -207,6 +207,15 @@ export default {
         text   : 'NEW',
       },
     },
+    {
+      name : 'Loading',
+      url  : '/loading',
+      icon : 'icon-reload',
+      badge: {
+        variant: 'danger',
+        text   : 'HOT',
+      },
+    },
     {
       divider: true,
     },

resources/assets/js/coreui/_nav.js

@@ -0,0 +1,47 @@
+<template>
+  <div :class="['spinner-container', { 'full-width': fullWidth || cover, 'full-height': fullHeight || cover}]">
+    <component
+      :is="cVariant"
+      :size="cSize" />
+    <div class="spinner-body">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Spinner from 'vue-loading-spinner'
+
+export const COMPONENTS = _.mapKeys(Spinner, (value, key) => `Spinner${key}`)
+
+export default {
+  name      : 'LoadingSpinner',
+  components: {
+    ...COMPONENTS,
+  },
+  props: {
+    variant: {
+      type     : String,
+      default  : 'rotate-square',
+      validator: function (value) {
+        return _.keys(Spinner).indexOf(_.pascalCase(value)) !== -1
+      },
+    },
+    size: {
+      type   : Number,
+      default: 40,
+    },
+    fullWidth : Boolean,
+    fullHeight: Boolean,
+    cover     : Boolean,
+  },
+  computed: {
+    cVariant () {
+      return `Spinner${_.pascalCase(this.variant)}`
+    },
+    cSize () {
+      return `${this.size}px`
+    },
+  },
+}
+</script>

resources/assets/js/coreui/components/Loading.vue

@@ -6,6 +6,7 @@ import Datepicker from 'vuejs-datepicker'
 import { id } from 'vuejs-datepicker/dist/locale'
 import Notifications from 'vue-notification'
 import Sweetalert from 'vue-sweetalert2'
+import Loading from './components/Loading'
 import App from './App'
 import router from './router'
 import store from './store'
@@ -14,6 +15,7 @@ Vue.use(BootstrapVue)
 Vue.use(Notifications)
 Vue.use(Sweetalert)
 
+Vue.component('b-loading', Loading)
 Vue.component('b-datepicker', {
   extends: Datepicker,
   props  : {

resources/assets/js/coreui/main.js

@@ -12,6 +12,7 @@ import Typography from '@/views/theme/Typography'
 
 import Charts from '@/views/Charts'
 import Widgets from '@/views/Widgets'
+import Loading from '@/views/Loading'
 
 // Views - Components
 import Cards from '@/views/base/Cards'
@@ -100,6 +101,11 @@ export default new Router({
           name     : 'Widgets',
           component: Widgets,
         },
+        {
+          path     : 'loading',
+          name     : 'Loading',
+          component: Loading,
+        },
         {
           path     : 'base',
           redirect : '/base/cards',

resources/assets/js/coreui/router/index.js

@@ -0,0 +1,36 @@
+<template>
+  <div class="wrapper">
+    <b-card header="Vue Loading Spinner">
+      <b-row>
+        <template v-for="variant in variants">
+          <b-loading
+            :variant="variant"
+            :key="variant">
+            {{ variant }}
+          </b-loading>
+        </template>
+      </b-row>
+    </b-card>
+    <b-card header="Cover Size Loading">
+      <b-loading
+        variant="RotateSquare2"
+        cover >
+        Loading
+      </b-loading>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import * as Spinner from 'vue-loading-spinner'
+
+export default {
+  name: 'Loading',
+  data () {
+    return {
+      variants: _.keys(Spinner),
+    }
+  },
+}
+
+</script>

resources/assets/js/coreui/views/Loading.vue

@@ -19,7 +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 '~animate.css/animate.min.css';
 
 // Import Other CSS Module
 
@@ -32,3 +32,4 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 // Custom styles
 @import 'custom';
 @import 'vendors/vue-notification/notification';
+@import 'vendors/vue-loading-spinner/spinner';

resources/assets/sass/coreui/style.scss

@@ -0,0 +1,21 @@
+@import '~vue-loading-spinner/dist/vue-loading-spinner.css';
+
+.spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 250px;
+  min-width: 250px;
+  width: 25%;
+  overflow: hidden;
+  .spinner-body {
+    margin-top: 1rem;
+  }
+  &.full-width {
+    width: 100%;
+  }
+  &.full-height {
+    height: 100vh;
+  }
+}