Skip to content

Commit bc64f86

Browse files
sky-codef
sky-code
authored and
f
committed
add wrapLoading helper function, fix examples, fix logging format, rename spinner to loading (#30)
* add wrapLoading helper function, fix examples, fix logging format * make wrapLoading async by default * rename slot spinner to loading * update wrapLoading example
1 parent 09142a9 commit bc64f86

File tree

11 files changed

+12609
-34
lines changed

11 files changed

+12609
-34
lines changed

‎README.md‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,32 @@ export default {
214214
}
215215
```
216216

217+
#### `wrapLoading(loader String, func Function, [,force_sync = false])`
218+
219+
Decorator that wraps function,
220+
will trigger a loading and will end loader after the original function (`func` argument) is finished.
221+
222+
By default `wrapLoading` return async function,
223+
if you want to wrap default sync function pass `true` in last argument
224+
225+
_Example using with async function_
226+
227+
```js
228+
methods: {
229+
fetchDataFromApi: wrapLoading('fetch data', async function () {
230+
function sleep(ms) {
231+
return new Promise(resolve => setTimeout(resolve, ms));
232+
}
233+
// do work here
234+
await sleep(3000);
235+
// simulate some api call
236+
this.fetchResponse = Math.random()
237+
})
238+
}
239+
```
240+
241+
See also `examples/wrap-example`
242+
217243
## Using `v-loading` Component
218244

219245
If you disable `registerComponents` option then
@@ -230,7 +256,7 @@ In template, you should wrap your content with `v-loading` component to show loa
230256

231257
```html
232258
<v-loading loader='fetching data'>
233-
<template slot='spinner'>
259+
<template slot='loading'>
234260
This will be shown when "fetching data" loader starts.
235261
</template>
236262

@@ -243,7 +269,7 @@ Better example for a `button` with loading state:
243269
```html
244270
<button :disabled='$vueLoading.isLoading("creating user")'>
245271
<v-loading loader='creating user'>
246-
<template slot='spinner'>Creating User...</template>
272+
<template slot='loading'>Creating User...</template>
247273
Create User
248274
</v-loading>
249275
</button>
@@ -261,7 +287,7 @@ In this example above, the **tab gets data from back-end**, and the **table load
261287
<template lang='pug'>
262288
div
263289
v-loading(loader='fetching tabs')
264-
template(slot='spinner')
290+
template(slot='loading')
265291
b-tabs
266292
template(slot='tabs')
267293
b-nav-item(active disabled)
@@ -271,7 +297,7 @@ div
271297
b-nav-item(v-for='tab in tabs') {{ tab.name }}
272298

273299
v-loading(loader='fetching data')
274-
table-gradient-spinner(slot='spinner')
300+
table-gradient-spinner(slot='loading')
275301
table
276302
tr(v-for='row in data')
277303
// ...
@@ -309,12 +335,12 @@ You may want to design your own reusable loader for your project. You better cre
309335
</style>
310336
```
311337

312-
Now you can use your spinner everywhere using `slot='spinner'` attribute:
338+
Now you can use your spinner everywhere using `slot='loading'` attribute:
313339

314340
```html
315341
<template lang="pug">
316342
v-loading(loader='fetching data')
317-
my-spinner(slot='spinner')
343+
my-spinner(slot='loading')
318344
div
319345
p My main content after fetching data...
320346
</template>
@@ -331,7 +357,7 @@ You need to put them into a `template` tag.
331357

332358
```html
333359
<v-loading loader='fetching data'>
334-
<template slot="spinner">
360+
<template slot="loading">
335361
<v-loading-spinner height='30px' width='30px' />
336362
</template>
337363

‎examples/default-example/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Vue from 'vue';
2-
import VueLoading from '../../src/vue-loading';
2+
import VueLoading from '../../src/vuex-loading';
33

4-
import main from './main.vue'
4+
import main from './main.vue';
55

66
Vue.use(VueLoading);
77

88
new Vue({
9-
el: '#app',
10-
vueLoading: new VueLoading({registerComponents: false}),
11-
render: function (createElement) {
12-
return createElement(main)
13-
}
9+
el: '#app',
10+
vueLoading: new VueLoading({ registerComponents: false }),
11+
render: function(createElement) {
12+
return createElement(main);
13+
}
1414
});

‎examples/default-example/main.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<div>
33
<div class="container">
44
<v-loading message='Something loading! Lovely...'>
5-
<template slot='spinner'>
5+
<template slot='loading'>
66
<loading-heart width='1em' height='1em'/>
77
</template>
88
This will be shown after load.
99
</v-loading>
1010
</div>
1111
<button @click='$vueLoading.startLoading("writing code")' :disable='$vueLoading.isLoading("writing code")'>
1212
<v-loading loader='writing code' message='Writing Code...'>
13-
<template slot='spinner'>
13+
<template slot='loading'>
1414
<loading-spinner width="1em" height="1em"/>
1515
</template>
1616
Write Code
@@ -33,10 +33,10 @@
3333
<ul class="list">
3434
<li v-for='loader in loaders' @click='toggleLoader(loader)'>
3535
<v-loading :loader='loader' message=''>
36-
<template slot='spinner' v-if='loader == "c"'>
36+
<template slot='loading' v-if='loader == "c"'>
3737
<loading-heart width="1em" height="1em"/>
3838
</template>
39-
<template slot='spinner' v-else>
39+
<template slot='loading' v-else>
4040
<loading-spinner width="1em" height="1em"/>
4141
</template>
4242
{{ loader }}

‎examples/vuex-example/index.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import Vue from 'vue';
22
import Vuex from 'vuex';
3-
import VueLoading from '../../src/vue-loading';
3+
import VueLoading from '../../src/vuex-loading';
44

5-
import main from './main.vue'
5+
import main from './main.vue';
66

77
Vue.use(VueLoading);
88
Vue.use(Vuex);
99

1010
const store = new Vuex.Store({});
1111

12-
const vueLoading = new VueLoading({useVuex: true, moduleName: 'vuex-example-module'})
12+
const vueLoading = new VueLoading({
13+
useVuex: true,
14+
moduleName: 'vuex-example-module'
15+
});
1316
new Vue({
14-
el: '#app',
15-
store,
16-
vueLoading: vueLoading,
17-
render: function (createElement) {
18-
return createElement(main)
19-
}
17+
el: '#app',
18+
store,
19+
vueLoading: vueLoading,
20+
render: function(createElement) {
21+
return createElement(main);
22+
}
2023
});

‎examples/vuex-example/main.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<div>
33
<div class="container">
44
<v-loading message='Something loading! Lovely...'>
5-
<template slot='spinner'>
5+
<template slot='loading'>
66
<loading-heart width='1em' height='1em'/>
77
</template>
88
This will be shown after load.
99
</v-loading>
1010
</div>
1111
<button @click='$vueLoading.startLoading("writing code")' :disable='$vueLoading.isLoading("writing code")'>
1212
<v-loading loader='writing code' message='Writing Code...'>
13-
<template slot='spinner'>
13+
<template slot='loading'>
1414
<loading-spinner width="1em" height="1em"/>
1515
</template>
1616
Write Code
@@ -33,10 +33,10 @@
3333
<ul class="list">
3434
<li v-for='loader in loaders' @click='toggleLoader(loader)'>
3535
<v-loading :loader='loader' message=''>
36-
<template slot='spinner' v-if='loader == "c"'>
36+
<template slot='loading' v-if='loader == "c"'>
3737
<loading-heart width="1em" height="1em"/>
3838
</template>
39-
<template slot='spinner' v-else>
39+
<template slot='loading' v-else>
4040
<loading-spinner width="1em" height="1em"/>
4141
</template>
4242
{{ loader }}

‎examples/wrap-example/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue';
2+
import VueLoading from '../../src/vuex-loading';
3+
4+
import main from './main.vue';
5+
6+
Vue.use(VueLoading);
7+
8+
new Vue({
9+
el: '#app',
10+
vueLoading: new VueLoading({ registerComponents: false }),
11+
render: function(createElement) {
12+
return createElement(main);
13+
}
14+
});

‎examples/wrap-example/main.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div>
3+
<div class="container">
4+
<v-loading message='Something loading! Lovely...'>
5+
<template slot='loading'>
6+
<loading-heart width='1em' height='1em'/>
7+
</template>
8+
This will be shown after load.
9+
</v-loading>
10+
</div>
11+
<button @click='fetchDataFromApi' :disable='$vueLoading.isLoading("fetch data")'>
12+
<v-loading loader='fetch data' message='Fetching data...'>
13+
<template slot='loading'>
14+
<loading-spinner width="1em" height="1em"/>
15+
</template>
16+
Fetching response {{fetchResponse}}
17+
</v-loading>
18+
</button>
19+
20+
<button @click='syncCalculator' :disable='$vueLoading.isLoading("sync work")'>
21+
<v-loading loader='sync work' message='Calculating data...'>
22+
<template slot='loading'>
23+
<loading-spinner width="1em" height="1em"/>
24+
</template>
25+
Calculate data {{calculateData}}
26+
</v-loading>
27+
</button>
28+
</div>
29+
</template>
30+
<script>
31+
import vLoading from '../../src/v-loading.vue'
32+
import loadingHeart from '../../src/spinners/heart.vue'
33+
import loadingSpinner from '../../src/spinners/spinner.vue'
34+
import {wrapLoading} from '../../src/vuex-loading'
35+
36+
export default {
37+
name: 'main',
38+
components: {
39+
'v-loading': vLoading,
40+
'loading-heart': loadingHeart,
41+
'loading-spinner': loadingSpinner
42+
},
43+
data() {
44+
return {
45+
fetchResponse: null,
46+
calculateData: 0
47+
};
48+
},
49+
methods: {
50+
fetchDataFromApi: wrapLoading('fetch data', async function () {
51+
function sleep(ms) {
52+
return new Promise(resolve => setTimeout(resolve, ms));
53+
}
54+
55+
// do work here
56+
await sleep(3000);
57+
// simulate some api call
58+
this.fetchResponse = Math.random()
59+
}),
60+
syncCalculator: wrapLoading('sync work', function () {
61+
for (let i = 2; i < 1000000000; i++) {
62+
Math.sqrt(i)
63+
}
64+
this.calculateData += 1;
65+
}, true)
66+
}
67+
}
68+
</script>
69+
70+
71+
<style>
72+
body {
73+
font-family: Arial, Helvetica, sans-serif;
74+
font-size: 20px;
75+
}
76+
77+
#app {
78+
margin: 50px auto;
79+
width: 500px;
80+
text-align: center;
81+
}
82+
83+
.list {
84+
list-style: none;
85+
padding: 0;
86+
}
87+
88+
.list li {
89+
display: inline-block;
90+
margin: 10px;
91+
width: 30px;
92+
height: 30px;
93+
border-radius: 3px;
94+
border: 2px solid #ccc;
95+
line-height: 30px;
96+
}
97+
98+
.container {
99+
padding: 50px;
100+
}
101+
102+
button {
103+
border: 0;
104+
background-color: #fff;
105+
border: 2px solid #9f0fa0;
106+
border-radius: 4px;
107+
margin: 5px;
108+
color: #9f0fa0;
109+
font-size: 16px;
110+
padding: 8px;
111+
}
112+
113+
button[disabled] {
114+
opacity: 0.4;
115+
}
116+
117+
.my-loading {
118+
text-align: center;
119+
opacity: .5;
120+
animation: pulse 3s infinite;
121+
animation-delay: 1s;
122+
}
123+
124+
@-webkit-keyframes pulse {
125+
0%, 100% {
126+
opacity: .5;
127+
}
128+
50% {
129+
opacity: .1;
130+
}
131+
}
132+
133+
@keyframes pulse {
134+
0%, 100% {
135+
opacity: .5;
136+
}
137+
50% {
138+
opacity: .1;
139+
}
140+
}
141+
</style>

0 commit comments

Comments
 (0)