add wrapLoading helper function, fix examples, fix logging format, rename spinner to loading

README.md

@@ -214,6 +214,32 @@ export default {
 }
 ```
 
+#### `wrapLoading(loader String, func Function, [,force_sync = false])`
+
+Decorator that wraps function,
+will trigger a loading and will end loader after the original function (`func` argument) is finished.
+
+By default `wrapLoading` return async function,
+if you want to wrap default sync function pass `true` in last argument
+
+_Example using with async function_
+
+```js
+methods: {
+  fetchDataFromApi: wrapLoading('fetch data', async function () {
+    function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    // do work here
+    await sleep(3000);
+    // simulate some api call
+    this.fetchResponse = Math.random()
+  })
+}
+```
+
+See also `examples/wrap-example`
+
 ## Using `v-loading` Component
 
 If you disable `registerComponents` option then
@@ -230,7 +256,7 @@ In template, you should wrap your content with `v-loading` component to show loa
 
 ```html
 <v-loading loader='fetching data'>
-  <template slot='spinner'>
+  <template slot='loading'>
     This will be shown when "fetching data" loader starts.
   </template>
 
@@ -243,7 +269,7 @@ Better example for a `button` with loading state:
 ```html
 <button :disabled='$vueLoading.isLoading("creating user")'>
   <v-loading loader='creating user'>
-    <template slot='spinner'>Creating User...</template>
+    <template slot='loading'>Creating User...</template>
     Create User
   </v-loading>
 </button>
@@ -261,7 +287,7 @@ In this example above, the **tab gets data from back-end**, and the **table load
 <template lang='pug'>
 div
   v-loading(loader='fetching tabs')
-    template(slot='spinner')
+    template(slot='loading')
       b-tabs
         template(slot='tabs')
           b-nav-item(active disabled)
@@ -271,7 +297,7 @@ div
         b-nav-item(v-for='tab in tabs') {{ tab.name }}
 
   v-loading(loader='fetching data')
-    table-gradient-spinner(slot='spinner')
+    table-gradient-spinner(slot='loading')
     table
       tr(v-for='row in data')
         // ...
@@ -309,12 +335,12 @@ You may want to design your own reusable loader for your project. You better cre
 </style>
 ```
 
-Now you can use your spinner everywhere using `slot='spinner'` attribute:
+Now you can use your spinner everywhere using `slot='loading'` attribute:
 
 ```html
 <template lang="pug">
   v-loading(loader='fetching data')
-    my-spinner(slot='spinner')
+    my-spinner(slot='loading')
     div
       p My main content after fetching data...
 </template>
@@ -331,7 +357,7 @@ You need to put them into a `template` tag.
 
 ```html
 <v-loading loader='fetching data'>
-  <template slot="spinner">
+  <template slot="loading">
     <v-loading-spinner height='30px' width='30px' />
   </template>
 

examples/default-example/index.js

@@ -1,14 +1,14 @@
 import Vue from 'vue';
-import VueLoading from '../../src/vue-loading';
+import VueLoading from '../../src/vuex-loading';
 
-import main from './main.vue'
+import main from './main.vue';
 
 Vue.use(VueLoading);
 
 new Vue({
-    el: '#app',
-    vueLoading: new VueLoading({registerComponents: false}),
-    render: function (createElement) {
-        return createElement(main)
-    }
+  el: '#app',
+  vueLoading: new VueLoading({ registerComponents: false }),
+  render: function(createElement) {
+    return createElement(main);
+  }
 });

examples/default-example/main.vue

@@ -2,15 +2,15 @@
     <div>
         <div class="container">
             <v-loading message='Something loading! Lovely...'>
-                <template slot='spinner'>
+                <template slot='loading'>
                     <loading-heart width='1em' height='1em'/>
                 </template>
                 This will be shown after load.
             </v-loading>
         </div>
         <button @click='$vueLoading.startLoading("writing code")' :disable='$vueLoading.isLoading("writing code")'>
             <v-loading loader='writing code' message='Writing Code...'>
-                <template slot='spinner'>
+                <template slot='loading'>
                     <loading-spinner width="1em" height="1em"/>
                 </template>
                 Write Code
@@ -33,10 +33,10 @@
         <ul class="list">
             <li v-for='loader in loaders' @click='toggleLoader(loader)'>
                 <v-loading :loader='loader' message=''>
-                    <template slot='spinner' v-if='loader == "c"'>
+                    <template slot='loading' v-if='loader == "c"'>
                         <loading-heart width="1em" height="1em"/>
                     </template>
-                    <template slot='spinner' v-else>
+                    <template slot='loading' v-else>
                         <loading-spinner width="1em" height="1em"/>
                     </template>
                     {{ loader }}

examples/vuex-example/index.js

@@ -1,20 +1,23 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import VueLoading from '../../src/vue-loading';
+import VueLoading from '../../src/vuex-loading';
 
-import main from './main.vue'
+import main from './main.vue';
 
 Vue.use(VueLoading);
 Vue.use(Vuex);
 
 const store = new Vuex.Store({});
 
-const vueLoading = new VueLoading({useVuex: true, moduleName: 'vuex-example-module'})
+const vueLoading = new VueLoading({
+  useVuex: true,
+  moduleName: 'vuex-example-module'
+});
 new Vue({
-    el: '#app',
-    store,
-    vueLoading: vueLoading,
-    render: function (createElement) {
-        return createElement(main)
-    }
+  el: '#app',
+  store,
+  vueLoading: vueLoading,
+  render: function(createElement) {
+    return createElement(main);
+  }
 });

examples/vuex-example/main.vue

@@ -2,15 +2,15 @@
     <div>
         <div class="container">
             <v-loading message='Something loading! Lovely...'>
-                <template slot='spinner'>
+                <template slot='loading'>
                     <loading-heart width='1em' height='1em'/>
                 </template>
                 This will be shown after load.
             </v-loading>
         </div>
         <button @click='$vueLoading.startLoading("writing code")' :disable='$vueLoading.isLoading("writing code")'>
             <v-loading loader='writing code' message='Writing Code...'>
-                <template slot='spinner'>
+                <template slot='loading'>
                     <loading-spinner width="1em" height="1em"/>
                 </template>
                 Write Code
@@ -33,10 +33,10 @@
         <ul class="list">
             <li v-for='loader in loaders' @click='toggleLoader(loader)'>
                 <v-loading :loader='loader' message=''>
-                    <template slot='spinner' v-if='loader == "c"'>
+                    <template slot='loading' v-if='loader == "c"'>
                         <loading-heart width="1em" height="1em"/>
                     </template>
-                    <template slot='spinner' v-else>
+                    <template slot='loading' v-else>
                         <loading-spinner width="1em" height="1em"/>
                     </template>
                     {{ loader }}

examples/wrap-example/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import VueLoading from '../../src/vuex-loading';
+
+import main from './main.vue';
+
+Vue.use(VueLoading);
+
+new Vue({
+  el: '#app',
+  vueLoading: new VueLoading({ registerComponents: false }),
+  render: function(createElement) {
+    return createElement(main);
+  }
+});

examples/wrap-example/main.vue

@@ -0,0 +1,141 @@
+<template>
+    <div>
+        <div class="container">
+            <v-loading message='Something loading! Lovely...'>
+                <template slot='loading'>
+                    <loading-heart width='1em' height='1em'/>
+                </template>
+                This will be shown after load.
+            </v-loading>
+        </div>
+        <button @click='fetchDataFromApi' :disable='$vueLoading.isLoading("fetch data")'>
+            <v-loading loader='fetch data' message='Fetching data...'>
+                <template slot='loading'>
+                    <loading-spinner width="1em" height="1em"/>
+                </template>
+                Fetching response {{fetchResponse}}
+            </v-loading>
+        </button>
+
+        <button @click='syncCalculator' :disable='$vueLoading.isLoading("sync work")'>
+            <v-loading loader='sync work' message='Calculating data...'>
+                <template slot='loading'>
+                    <loading-spinner width="1em" height="1em"/>
+                </template>
+                Calculate data {{calculateData}}
+            </v-loading>
+        </button>
+    </div>
+</template>
+<script>
+import vLoading from '../../src/v-loading.vue'
+import loadingHeart from '../../src/spinners/heart.vue'
+import loadingSpinner from '../../src/spinners/spinner.vue'
+import {wrapLoading} from '../../src/vuex-loading'
+
+export default {
+  name: 'main',
+  components: {
+    'v-loading': vLoading,
+    'loading-heart': loadingHeart,
+    'loading-spinner': loadingSpinner
+  },
+  data() {
+    return {
+      fetchResponse: null,
+      calculateData: 0
+    };
+  },
+  methods: {
+    fetchDataFromApi: wrapLoading('fetch data', async function () {
+      function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      }
+
+      // do work here
+      await sleep(3000);
+      // simulate some api call
+      this.fetchResponse = Math.random()
+    }),
+    syncCalculator: wrapLoading('sync work', function () {
+      for (let i = 2; i < 1000000000; i++) {
+        Math.sqrt(i)
+      }
+      this.calculateData += 1;
+    }, true)
+  }
+}
+</script>
+
+
+<style>
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+}
+
+#app {
+    margin: 50px auto;
+    width: 500px;
+    text-align: center;
+}
+
+.list {
+    list-style: none;
+    padding: 0;
+}
+
+.list li {
+    display: inline-block;
+    margin: 10px;
+    width: 30px;
+    height: 30px;
+    border-radius: 3px;
+    border: 2px solid #ccc;
+    line-height: 30px;
+}
+
+.container {
+    padding: 50px;
+}
+
+button {
+    border: 0;
+    background-color: #fff;
+    border: 2px solid #9f0fa0;
+    border-radius: 4px;
+    margin: 5px;
+    color: #9f0fa0;
+    font-size: 16px;
+    padding: 8px;
+}
+
+button[disabled] {
+    opacity: 0.4;
+}
+
+.my-loading {
+    text-align: center;
+    opacity: .5;
+    animation: pulse 3s infinite;
+    animation-delay: 1s;
+}
+
+@-webkit-keyframes pulse {
+    0%, 100% {
+        opacity: .5;
+    }
+    50% {
+        opacity: .1;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: .5;
+    }
+    50% {
+        opacity: .1;
+    }
+}
+</style>