Skip to content

Commit 7169f8e

Browse files
authored
Upgrade to Vue 2 (#9)
* init * migrate to Vue 2 * remove jasmine * remove blank * update readme
1 parent a688d69 commit 7169f8e

20 files changed

+54
-1733
lines changed

README.md

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
# Vue.js Paginator [![CircleCI](https://circleci.com/gh/hootlex/vuejs-paginator.svg?style=shield&circle-token=:circle-ci-badge-token)](https://circleci.com/gh/hootlex/vuejs-paginator) [![npm downloads](https://img.shields.io/npm/dt/vuejs-paginator.svg)](https://www.npmjs.com/package/vuejs-paginator) <a href="https://www.npmjs.com/package/vuejs-paginator"><img src="https://img.shields.io/npm/v/vuejs-paginator.svg" alt="Version"></a> [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
2-
> A Vue.js plugin to easily integrate pagination to your projects.
2+
> A Vue.js plugin to easily integrate pagination in your projects.
33
4-
VueJs Paginator is a simple but powerful plugin, since it gives you access on how to render the data, instead of using a predefined table.
4+
VueJs Paginator is a simple but powerful plugin since it gives you access on how to render the data, instead of using a predefined table.
55

6-
Just give it a variable where you want the returned data to be stored. Every time the user changes page, your variable will update immediately.
6+
![vue paginator preview](http://i.imgur.com/2jah1qt.gif)
77

88
The way you use it is similar to Laravel's paginator.
99

10-
>Vuejs Paginator takes a `resource_url` and a `resource` empty variable and it fetches the data from the provided URL. When the call is done, it adds the returned data to the `resource` variable.
11-
1210
## Installation
1311
### Through npm
1412
``` bash
@@ -23,29 +21,37 @@ npm install vuejs-paginator --save-dev
2321
```
2422

2523
## Usage
26-
Register VPaginator component inside your Vue instance.
24+
Use VPaginator in the HTML.
25+
```html
26+
<v-paginator resource_url="api/animals" @update="updateResource"></v-paginator>
27+
```
2728

29+
Prepare the Vue instance.
2830
```js
2931
// if you are not using the cdn version you have to import VuePaginator.
3032
// import VuePaginator from 'vuejs-paginator'
3133
new Vue({
32-
...
34+
data () {
35+
return {
36+
animals: []
37+
}
38+
},
3339
components: {
3440
VPaginator: VuePaginator
3541
},
42+
methods: {
43+
updateResource(data){
44+
this.animals = data
45+
}
46+
}
3647
...
3748
});
3849
```
3950

40-
Use it in your HTML.
41-
42-
```html
43-
<v-paginator :resource.sync="animals" resource_url="api/animals"></v-paginator>
44-
```
51+
### Thats it
4552

46-
### THATS IT
53+
Every time a page is changed or fetched, resource variable will contain the returned data.
4754

48-
Then you will have access to the returned data inside your `resource` variable, in this example **animals**, and you'll be able to render it as you would normally do.
4955
```html
5056
<ul>
5157
<li v-for="animal in animals">
@@ -55,7 +61,7 @@ Then you will have access to the returned data inside your `resource` variable,
5561
```
5662

5763
### Documentation
58-
[Here you can find a more detailed Documentation along with a few examples.](http://hootlex.github.io/vuejs-paginator/)
64+
[Here you can find the detailed Documentation](http://hootlex.github.io/vuejs-paginator/)
5965

6066
## Build Setup
6167

dist/vuejs-paginator.js

Lines changed: 14 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/vuejs-paginator.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/vuejs-paginator.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"src": "src/"
1515
},
1616
"dependencies": {
17-
"vue": "^1.0.8",
18-
"vue-resource": "^0.9.0"
17+
"vue": "^2.0.0",
18+
"vue-resource": "^1.0.3"
1919
},
2020
"files": [
2121
"LICENSE",
@@ -39,6 +39,7 @@
3939
"css-loader": "^0.23.1",
4040
"function-bind": "^1.1.0",
4141
"isparta-loader": "^2.0.0",
42+
"karma": "^1.3.0",
4243
"karma-coverage": "^0.5.5",
4344
"karma-mocha": "^0.2.2",
4445
"karma-phantomjs-launcher": "^1.0.0",

src/VPaginator.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414
import {utils} from './utils'
1515
export default {
1616
props: {
17-
resource: {
18-
required: true,
19-
twoWay: true
20-
},
2117
resource_url: {
2218
type: String,
2319
required: true
@@ -61,7 +57,8 @@ export default {
6157
},
6258
handleResponseData (response) {
6359
this.makePagination(response)
64-
this.$set('resource', utils.getNestedValue(response, this.config.remote_data))
60+
let data = utils.getNestedValue(response, this.config.remote_data)
61+
this.$emit('update', data)
6562
},
6663
makePagination (data) {
6764
this.current_page = utils.getNestedValue(data, this.config.remote_current_page)

test/unit/coverage/lcov-report/base.css

Lines changed: 0 additions & 212 deletions
This file was deleted.

0 commit comments

Comments
 (0)