first commit, drag and drop not working yet

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015-loose",
+    "stage-1"
+  ],
+  "plugins": [
+  ]
+}

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+build
+npm-debug.log
+.idea

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 greyby
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,96 @@
+# vue-spinner
+
+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.
+
+## [Live demo](http://greyby.github.io/vue-spinner/)
+
+## Installation
+
+### NPM
+```bash
+$ npm install vue-spinner
+```
+
+### CommonJS
+```js
+var PulseLoader = require('vue-spinner/src/PulseLoader.vue');
+
+new Vue({
+  components: {
+    'PulseLoader': PulseLoader
+  }
+})
+```
+
+### ES6
+```js
+import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
+
+new Vue({
+  components: {
+    PulseLoader
+  }
+})
+```
+
+### For browserify
+If you use browserify + vueify, you may need to import vue-spinner like this:
+
+```js
+var PulseLoader= require('vue-spinner/dist/vue-spinner.min').PulseLoader;
+```
+
+```js
+import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
+```
+
+[explain here](https://github.com/greyby/vue-spinner/issues/2)
+
+### Browser globals
+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.
+
+```html
+<script src="path/to/vue.js"></script>
+<script src="path/to/vue-spinner.js"></script>
+<script>
+  var PulseLoader = VueStrap.PulseLoader
+</script>
+```
+
+## Local setup
+
+```
+npm install
+npm run dev
+```
+
+## Usage
+
+```html
+<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
+<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
+<clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
+<rise-loader :loading="loading" :color="color" :size="size"></rise-loader>
+<beat-loader :loading="loading" :color="color" :size="size"></beat-loader>
+<sync-loader :loading="loading" :color="color" :size="size"></sync-loader>
+<rotate-loader :loading="loading" :color="color" :size="size"></rotate-loader>
+<fade-loader :loading="loading" :color="color" :height="height" :width="width"></fade-loader>
+<pacman-loader :loading="loading" :color="color" :size="size"></pacman-loader>
+<square-loader :loading="loading" :color="color" :size="size"></square-loader>
+<scale-loader :loading="loading" :color="color" :height="height" :width="width"></scale-loader>
+<skew-loader :loading="loading" :color="color" :size="size"></skew-loader>
+<moon-loader :loading="loading" :color="color" :size="size"></moon-loader>
+<ring-loader :loading="loading" :color="color" :size="size"></ring-loader>
+<bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>          
+<dot-loader :loading="loading" :color="color" :size="size"></dot-loader>
+```
+
+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.
+
+## TODO
+
+
+
+## License
+
+ vue-spinner is licensed under [The MIT License](LICENSE).

example/app.css

@@ -0,0 +1,114 @@
+/*** EXAMPLE ***/
+#content {
+    width: 100%;
+}
+
+.vue-grid-layout {
+    background: #eee;
+}
+.layoutJSON {
+    background: #ddd;
+    border: 1px solid black;
+    margin-top: 10px;
+    padding: 10px;
+}
+.columns {
+    -moz-columns: 120px;
+    -webkit-columns: 120px;
+    columns: 120px;
+}
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #ccc;
+    border: 1px solid black;
+}
+.vue-grid-item.resizing {
+    opacity: 0.9;
+}
+.vue-grid-item.static {
+    background: #cce;
+}
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 24px;
+}
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+.vue-grid-item .add {
+    cursor: pointer;
+}
+
+
+
+/******* DRAG AND DROP *******/
+
+/*
+.gu-mirror {
+    position: fixed !important;
+    margin: 0 !important;
+    z-index: 9999 !important;
+    opacity: 0.8;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: alpha(opacity=80);
+}
+.gu-hide {
+    display: none !important;
+}
+.gu-unselectable {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+.gu-transit {
+    opacity: 0.2;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+    filter: alpha(opacity=20);
+}
+*/
+/*
+ * note that styling gu-mirror directly is a bad practice because it's too generic.
+ * you're better off giving the draggable elements a unique class and styling that directly!
+ */
+/*
+.container div,
+.gu-mirror {
+    !*padding: 10px;*!
+    background-color: rgba(0, 0, 0, 0.2);
+    transition: opacity 0.4s ease-in-out;
+}
+.container div {
+    cursor: move;
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    !*margin-bottom: 10px;*!
+}
+.container div:last-child {
+    !*margin-bottom: 0;*!
+}
+.gu-mirror {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+.container .ex-moved {
+    background-color: #e74c3c;
+}
+.container.ex-over {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+.handle {
+    !*padding: 0 5px;*!
+    !*margin-right: 5px;*!
+    background-color: rgba(0, 0, 0, 0.4);
+    cursor: move;
+}
+*/