Skip to content

Commit 33822f5

Browse files
gmsagmsa
committed
updated readme and changelog, first push to github
1 parent c826be9 commit 33822f5

File tree

6 files changed

+67
-115
lines changed

6 files changed

+67
-115
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Changelog
2+

‎README.md

Lines changed: 58 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,82 @@
1-
# vue-spinner
1+
# vue-grid-layout
22

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.
3+
**WORK IN PROGRESS: USE AT YOUR OWN RISK!**
44

5-
## [Live demo](http://greyby.github.io/vue-spinner/)
5+
vue-grid-layout is a grid layout system, like [Gridster](http://gridster.net), for Vue.js.
66

7-
## Installation
7+
**Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
88

9-
### NPM
10-
```bash
11-
$ npm install vue-spinner
12-
```
9+
It's responsive and supports breakpoints. Breakpoint layouts can be provided by the user
10+
or autogenerated.
1311

14-
### CommonJS
15-
```js
16-
var PulseLoader = require('vue-spinner/src/PulseLoader.vue');
12+
<!--
13+
[**[Demo](https://jbaysolutions.github.io/vue-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md)**]
14+
-->
1715

18-
new Vue({
19-
components: {
20-
'PulseLoader': PulseLoader
21-
}
22-
})
23-
```
16+
<!--
17+
## Table of Contents
2418
25-
### ES6
26-
```js
27-
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
19+
- [Demos](#demos)
20+
- [Features](#features)
21+
- [Installation](#installation)
22+
- [Usage](#usage)
23+
- [Responsive Usage](#responsive-usage)
24+
- [Providing Grid Width](#providing-grid-width)
25+
- [Grid Layout Props](#grid-layout-props)
26+
- [Responsive Grid Layout Props](#responsive-grid-layout-props)
27+
- [Grid Item Props](#grid-item-props)
28+
- [Contribute](#contribute)
29+
- [TODO List](#todo-list)
2830
29-
new Vue({
30-
components: {
31-
PulseLoader
32-
}
33-
})
34-
```
31+
## Demos
3532
36-
### For browserify
37-
If you use browserify + vueify, you may need to import vue-spinner like this:
33+
1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
3834
39-
```js
40-
var PulseLoader= require('vue-spinner/dist/vue-spinner.min').PulseLoader;
41-
```
35+
-->
4236

43-
```js
44-
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
45-
```
37+
#### Projects based on vue-grid-layout
4638

47-
[explain here](https://github.com/greyby/vue-spinner/issues/2)
39+
- [Draxed](https://www.draxed.com/)
4840

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.
41+
*Know of others? Create a PR to let me know!*
5142

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-
```
43+
## Features
5944

60-
## Local setup
45+
* 100% Vue.js - no jQuery
46+
* Draggable widgets
47+
* Resizable widgets
48+
* Static widgets
49+
* Vertical auto-packing
50+
* Bounds checking for dragging and resizing
51+
* Widgets may be added or removed without rebuilding grid
52+
* Layout can be serialized and restored
53+
* Responsive breakpoints
54+
* Separate layouts per responsive breakpoint
55+
* Grid Items placed using CSS Transforms
6156

62-
```
63-
npm install
64-
npm run dev
65-
```
6657

67-
## Usage
58+
## Installation
6859

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-
```
8760

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.
8961

90-
## TODO
62+
## Usage
63+
64+
65+
## Contribute
9166

67+
If you have a feature request, please add it as an issue or make a pull request.
9268

9369

94-
## License
70+
## TODO List
9571

96-
vue-spinner is licensed under [The MIT License](LICENSE).
72+
- [x] Basic grid layout
73+
- [x] Fluid grid layout
74+
- [x] Grid packing
75+
- [x] Draggable grid items
76+
- [x] Live grid packing while dragging
77+
- [x] Resizable grid items
78+
- [x] Layouts per responsive breakpoint
79+
- [ ] Static elements
80+
- [ ] Min/max w/h per item
81+
- [ ] Resizable handles on other corners
82+
- [ ] Configurable w/h per breakpoint

‎index.html

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,8 @@ <h1>Vue Grid</h1>
1111
<div id="app">
1212
<!--<pre>{{ $data | json }}</pre>-->
1313
<div>
14-
<!--<div class="layoutJSON">
15-
Displayed as <code>[x, y, w, h]</code>:
16-
<div class="columns">
17-
<div class="layoutItem" v-for="item in initialLayout">
18-
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
19-
</div>
20-
</div>
21-
</div>-->
2214
<div class="layoutJSON">
23-
<b>COMPACTED: </b>Displayed as <code>[x, y, w, h]</code>:
15+
Displayed as <code>[x, y, w, h]</code>:
2416
<div class="columns">
2517
<div class="layoutItem" v-for="item in layout">
2618
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
@@ -30,10 +22,10 @@ <h1>Vue Grid</h1>
3022
</div>
3123
<div id="content">
3224
<!--<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
33-
<text-item v-for="item in layout" :text="item.i" :slot="item.i"></text-item>
25+
<text-item v-for="item in layout" :text="item.i"></text-item>
3426
</responsive-grid-layout>-->
3527
<grid-layout :layout.sync="layout" :cols="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
36-
<!--<text-item v-for="item in layout" :text="item.i" name="{{item.id}}"></text-item>-->
28+
<text-item v-for="item in layout" :text="item.i" slot="{{item.i}}"></text-item>
3729
</grid-layout>
3830
</div>
3931

‎src/GridItem.vue

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
:class="{ 'vue-resizable' : isResizable, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
55
style="{{createStyle}}"
66
>
7-
<!--<component :is="comp" :text="i"></component>-->
7+
<!--<slot name="{{i}}">X</slot>
8+
<component :is="textItem" :text="i"></component>-->
89
<span class="text">{{i}}</span>
910
<!--<span class="text">{{i}}</span>-->
1011
<!--<pre>
@@ -431,36 +432,6 @@
431432
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
432433
return {w, h};
433434
}
434-
435-
/*
436-
handleDragStart: function(elem) {
437-
console.log('handleDragStart', elem);
438-
// this.loggedEvent = 'handleDragStart';
439-
},
440-
handleDragOver: function(elem) {
441-
// console.log('handleDragOver', elem);
442-
// this.loggedEvent = 'handleDragOver';
443-
},
444-
handleDragEnter: function(elem) {
445-
console.log('handleDragEnter', elem);
446-
// this.loggedEvent = 'handleDragEnter';
447-
},
448-
handleDragLeave: function(elem) {
449-
console.log('handleDragLeave', elem);
450-
// this.loggedEvent = 'handleDragLeave';
451-
},
452-
handleDragEnd: function(elem) {
453-
console.log('handleDragEnd', elem);
454-
console.log("LEFT: " + this.$el.offsetLeft);
455-
console.log("TOP: " + this.$el.offsetTop);
456-
// this.loggedEvent = 'handleDragEnd';
457-
},
458-
handleDrop: function(itemOne, itemTwo) {
459-
console.log('handleDrop', itemOne, itemTwo);
460-
this.$dispatch("handleDrop", itemOne, itemTwo);
461-
// this.loggedEvent = 'handleDrop';
462-
}
463-
*/
464435
}
465436
}
466437
</script>

‎src/TextItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="text">{{text}}</span>
2+
<span class="text">=> {{text}}</span>
33
</template>
44
<style>
55
</style>

‎src/vue-drag-and-drop.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
this.el.removeEventListener('dragenter', this.handleDragEnter);
9999
this.el.removeEventListener('dragover', this.handleDragOver);
100100
this.el.removeEventListener('dragleave', this.handleDragLeave);
101+
this.el.removeEventListener('drag', this.handleDrag);
101102
}
102103
});
103104
}

0 commit comments

Comments
 (0)