Skip to content

Commit 0a01e27

Browse files
ff
committed
Initial version
0 parents  commit 0a01e27

16 files changed

+11880
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env"]
3+
}

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
npm-debug.log

‎.travis.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
3+
node_js:
4+
- 5
5+
6+
cache: yarn

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2016-2017 Fatih Kadir Akın <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# vuex-loading
2+
3+
Loader Management for [Vue](http://vuejs.org/) and [Vuex](http://vuex.vuejs.org/).
4+
5+
## Requirements
6+
7+
- [Vue.js](https://vuejs.org) (v2.0.0+)
8+
- [Vuex](http://vuex.vuejs.org) (v2.0.0+)
9+
10+
## Installation
11+
12+
```bash
13+
$ npm install vuex-loading
14+
# or if you using Yarn
15+
$ yarn add vuex-loading
16+
```
17+
18+
## Usage
19+
20+
```js
21+
import createVuexLoader from 'vuex-loading'
22+
23+
const VuexLoading = createVuexLoader({
24+
// The Vuex module name, 'loading' by default.
25+
moduleName: 'loading',
26+
// The Vue component name, 'v-loading' by default.
27+
componentName: 'v-loading',
28+
});
29+
30+
Vue.use(Vuex)
31+
Vue.use(VuexLoading)
32+
33+
const store = new Vuex.Store({
34+
plugins: [VuexLoading.Store],
35+
});
36+
```
37+
38+
Then you should register loading module:
39+
40+
```js
41+
new Vue({
42+
el: '#app',
43+
store,
44+
data() {
45+
return {
46+
email: '',
47+
password: '',
48+
}
49+
},
50+
computed: {
51+
...mapGetters('loading', [
52+
/*
53+
`isLoading` returns a function with a parameter of loader name.
54+
e.g. `isLoading('creating user')` will return you a boolean value.
55+
*/
56+
'isLoading',
57+
/*
58+
`anyLoading` returns a boolean value if any loader name exists on store.
59+
*/
60+
'anyLoading',
61+
])
62+
},
63+
methods: {
64+
startLoading() {
65+
/*
66+
VuexLoading registers $startLoading method with loader name.
67+
When you start a loader, it pushes the loader name to loading state.
68+
*/
69+
this.$startLoading('fetching data');
70+
},
71+
endLoading() {
72+
/*
73+
VuexLoading registers $startLoading method with loader name.
74+
When you stop a loader, it pulls the loader name from loading state.
75+
*/
76+
this.$endLoading('fetching data');
77+
},
78+
},
79+
});
80+
```
81+
82+
## License
83+
84+
MIT © [Fatih Kadir Akın](https://github.com/f)

‎example/index.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
body {
7+
font-family: Arial, Helvetica, sans-serif;
8+
font-size: 20px;
9+
}
10+
#app {
11+
margin: 50px auto;
12+
width: 500px;
13+
text-align: center;
14+
}
15+
.container {
16+
padding: 50px;
17+
}
18+
button {
19+
border: 0;
20+
background-color: #fff;
21+
border: 2px solid #9f0fa0;
22+
border-radius: 4px;
23+
margin: 5px;
24+
color: #9f0fa0;
25+
font-size: 16px;
26+
padding: 8px;
27+
}
28+
.v-loading {
29+
text-align: center;
30+
opacity: .5;
31+
animation: pulse 3s infinite;
32+
animation-delay: 1s;
33+
}
34+
35+
@-webkit-keyframes pulse {
36+
0%, 100% {
37+
opacity: .5;
38+
}
39+
50% {
40+
opacity: .1;
41+
}
42+
}
43+
@keyframes pulse {
44+
0%, 100% {
45+
opacity: .5;
46+
}
47+
50% {
48+
opacity: .1;
49+
}
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div id="app">
55+
<div class="container">
56+
<v-loading loader='fetching data' message='Loading...'>
57+
<template slot='spinner'>
58+
<v-loading-heart width='1em' height='1em' />
59+
</template>
60+
This will be shown after load.
61+
</v-loading>
62+
</div>
63+
<button @click='startLoading' :disable='$isLoading("fetching data")'>
64+
<v-loading message='Loading...'>
65+
<template slot='spinner'>
66+
<v-loading-spinner width="1em" height="1em" />
67+
</template>
68+
Load Data
69+
</v-loading>
70+
</button>
71+
<button @click='endLoading'>End</button>
72+
</div>
73+
<script type="text/javascript" src="bundle.js"></script>
74+
</body>
75+
</html>

‎example/index.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Vue from 'vue';
2+
import Vuex from 'vuex';
3+
import createVuexLoader from '../src/vuex-loading';
4+
5+
const VuexLoading = createVuexLoader({
6+
moduleName: 'loading',
7+
componentName: 'v-loading',
8+
});
9+
10+
Vue.use(Vuex);
11+
Vue.use(VuexLoading);
12+
13+
const store = new Vuex.Store({
14+
plugins: [VuexLoading.Store],
15+
});
16+
17+
new Vue({
18+
el: '#app',
19+
store,
20+
computed: {
21+
isLoading() {
22+
return this.$store.loading.getters.isLoading();
23+
}
24+
},
25+
methods: {
26+
startLoading() {
27+
this.$startLoading('fetching data');
28+
},
29+
endLoading() {
30+
this.$endLoading('fetching data');
31+
}
32+
},
33+
});

0 commit comments

Comments
 (0)