Skip to content

Commit 5e8a235

Browse files
gmsagmsa
committed
first commit, drag and drop not working yet
0 parents  commit 5e8a235

16 files changed

+1778
-0
lines changed

Diff for: ‎.babelrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"es2015-loose",
4+
"stage-1"
5+
],
6+
"plugins": [
7+
]
8+
}

Diff for: ‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules
3+
build
4+
npm-debug.log
5+
.idea

Diff for: ‎LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 greyby
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.
22+

Diff for: ‎README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# vue-spinner
2+
3+
A collection of loading spinners with Vue.js. Just convert yuanyan's React.js project [Halogen](https://github.com/yuanyan/halogen) to Vue.js components. Special thanks to [yuanyan](https://github.com/yuanyan) for the wonderful project.
4+
5+
## [Live demo](http://greyby.github.io/vue-spinner/)
6+
7+
## Installation
8+
9+
### NPM
10+
```bash
11+
$ npm install vue-spinner
12+
```
13+
14+
### CommonJS
15+
```js
16+
var PulseLoader = require('vue-spinner/src/PulseLoader.vue');
17+
18+
new Vue({
19+
components: {
20+
'PulseLoader': PulseLoader
21+
}
22+
})
23+
```
24+
25+
### ES6
26+
```js
27+
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
28+
29+
new Vue({
30+
components: {
31+
PulseLoader
32+
}
33+
})
34+
```
35+
36+
### For browserify
37+
If you use browserify + vueify, you may need to import vue-spinner like this:
38+
39+
```js
40+
var PulseLoader= require('vue-spinner/dist/vue-spinner.min').PulseLoader;
41+
```
42+
43+
```js
44+
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
45+
```
46+
47+
[explain here](https://github.com/greyby/vue-spinner/issues/2)
48+
49+
### Browser globals
50+
The `dist` folder contains `vue-spinner.js` and `vue-spinner.min.js` with all components exported in the <code>window.VueSpinner</code> object. These bundles are also available on NPM packages.
51+
52+
```html
53+
<script src="path/to/vue.js"></script>
54+
<script src="path/to/vue-spinner.js"></script>
55+
<script>
56+
var PulseLoader = VueStrap.PulseLoader
57+
</script>
58+
```
59+
60+
## Local setup
61+
62+
```
63+
npm install
64+
npm run dev
65+
```
66+
67+
## Usage
68+
69+
```html
70+
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
71+
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
72+
<clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
73+
<rise-loader :loading="loading" :color="color" :size="size"></rise-loader>
74+
<beat-loader :loading="loading" :color="color" :size="size"></beat-loader>
75+
<sync-loader :loading="loading" :color="color" :size="size"></sync-loader>
76+
<rotate-loader :loading="loading" :color="color" :size="size"></rotate-loader>
77+
<fade-loader :loading="loading" :color="color" :height="height" :width="width"></fade-loader>
78+
<pacman-loader :loading="loading" :color="color" :size="size"></pacman-loader>
79+
<square-loader :loading="loading" :color="color" :size="size"></square-loader>
80+
<scale-loader :loading="loading" :color="color" :height="height" :width="width"></scale-loader>
81+
<skew-loader :loading="loading" :color="color" :size="size"></skew-loader>
82+
<moon-loader :loading="loading" :color="color" :size="size"></moon-loader>
83+
<ring-loader :loading="loading" :color="color" :size="size"></ring-loader>
84+
<bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>
85+
<dot-loader :loading="loading" :color="color" :size="size"></dot-loader>
86+
```
87+
88+
You can customize the color and size with setting the props. All props have default value. You can control the spinner show/hidden with setting the loading prop.
89+
90+
## TODO
91+
92+
93+
94+
## License
95+
96+
vue-spinner is licensed under [The MIT License](LICENSE).

Diff for: ‎example/app.css

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*** EXAMPLE ***/
2+
#content {
3+
width: 100%;
4+
}
5+
6+
.vue-grid-layout {
7+
background: #eee;
8+
}
9+
.layoutJSON {
10+
background: #ddd;
11+
border: 1px solid black;
12+
margin-top: 10px;
13+
padding: 10px;
14+
}
15+
.columns {
16+
-moz-columns: 120px;
17+
-webkit-columns: 120px;
18+
columns: 120px;
19+
}
20+
.vue-grid-item:not(.vue-grid-placeholder) {
21+
background: #ccc;
22+
border: 1px solid black;
23+
}
24+
.vue-grid-item.resizing {
25+
opacity: 0.9;
26+
}
27+
.vue-grid-item.static {
28+
background: #cce;
29+
}
30+
.vue-grid-item .text {
31+
font-size: 24px;
32+
text-align: center;
33+
position: absolute;
34+
top: 0;
35+
bottom: 0;
36+
left: 0;
37+
right: 0;
38+
margin: auto;
39+
height: 24px;
40+
}
41+
.vue-grid-item .minMax {
42+
font-size: 12px;
43+
}
44+
.vue-grid-item .add {
45+
cursor: pointer;
46+
}
47+
48+
49+
50+
/******* DRAG AND DROP *******/
51+
52+
/*
53+
.gu-mirror {
54+
position: fixed !important;
55+
margin: 0 !important;
56+
z-index: 9999 !important;
57+
opacity: 0.8;
58+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
59+
filter: alpha(opacity=80);
60+
}
61+
.gu-hide {
62+
display: none !important;
63+
}
64+
.gu-unselectable {
65+
-webkit-user-select: none !important;
66+
-moz-user-select: none !important;
67+
-ms-user-select: none !important;
68+
user-select: none !important;
69+
}
70+
.gu-transit {
71+
opacity: 0.2;
72+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
73+
filter: alpha(opacity=20);
74+
}
75+
*/
76+
/*
77+
* note that styling gu-mirror directly is a bad practice because it's too generic.
78+
* you're better off giving the draggable elements a unique class and styling that directly!
79+
*/
80+
/*
81+
.container div,
82+
.gu-mirror {
83+
!*padding: 10px;*!
84+
background-color: rgba(0, 0, 0, 0.2);
85+
transition: opacity 0.4s ease-in-out;
86+
}
87+
.container div {
88+
cursor: move;
89+
cursor: grab;
90+
cursor: -moz-grab;
91+
cursor: -webkit-grab;
92+
!*margin-bottom: 10px;*!
93+
}
94+
.container div:last-child {
95+
!*margin-bottom: 0;*!
96+
}
97+
.gu-mirror {
98+
cursor: grabbing;
99+
cursor: -moz-grabbing;
100+
cursor: -webkit-grabbing;
101+
}
102+
.container .ex-moved {
103+
background-color: #e74c3c;
104+
}
105+
.container.ex-over {
106+
background-color: rgba(255, 255, 255, 0.3);
107+
}
108+
.handle {
109+
!*padding: 0 5px;*!
110+
!*margin-right: 5px;*!
111+
background-color: rgba(0, 0, 0, 0.4);
112+
cursor: move;
113+
}
114+
*/

0 commit comments

Comments
 (0)