Skip to content
This repository was archived by the owner on Jan 23, 2023. It is now read-only.

Commit 4993bee

Browse files
author
Vinayak Kulkarni
committed
Le Component & README.md
1 parent 25b6cea commit 4993bee

4 files changed

+343
-0
lines changed

‎README.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
[![Build Status](https://travis-ci.org/vinayakkulkarni/laravel-vue-semantic-ui-pagination.svg?branch=master)](https://travis-ci.org/vinayakkulkarni/laravel-vue-semantic-ui-pagination)
2+
3+
# Laravel Vue Semantic-UI Pagination :zap:
4+
+ A Vue.js pagination component for Laravel paginators that works with Semantic-UI.
5+
6+
+ This is [on GitHub](https://github.com/vinayakkulkarni/vue-image) so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:
7+
8+
## Requirements
9+
10+
* [Vue.js](https://vuejs.org/) 2.x
11+
* [Laravel](https://laravel.com/docs/) 5.x
12+
* [Semantic-UI](https://semantic-ui.com/) 2.x
13+
14+
## :white_check_mark: Install :ok_hand:
15+
16+
```bash
17+
npm install laravel-vue-semantic-ui-pagination
18+
// or
19+
yarn add laravel-vue-semantic-ui-pagination
20+
```
21+
22+
## :white_check_mark: Usage :mortar_board:
23+
24+
Register the component globally:
25+
```javascript
26+
Vue.component('pagination', require('laravel-vue-pagination'));
27+
```
28+
Or use locally
29+
```javascript
30+
import pagination from 'laravel-vue-semantic-ui-pagination';
31+
```
32+
33+
## :white_check_mark: Example :four_leaf_clover:
34+
35+
```html
36+
<ul>
37+
<li v-for="post in laravelData.data" v-text="post.title"></li>
38+
</ul>
39+
<pagination :data="laravelData" v-bind:showDisabled="true" icon="chevron" v-on:change-page="getResults"></pagination>
40+
```
41+
42+
```javascript
43+
Vue.component('example-component', {
44+
45+
data() {
46+
return {
47+
// Our data object that holds the Laravel paginator data
48+
laravelData: {},
49+
}
50+
},
51+
52+
created() {
53+
// Fetch initial results
54+
this.getResults();
55+
},
56+
57+
methods: {
58+
// Our method to GET results from a Laravel endpoint
59+
getResults(page) {
60+
if (typeof page === 'undefined') {
61+
page = 1;
62+
}
63+
64+
// Using vue-resource as an example
65+
this.$http.get('example/results?page=' + page)
66+
.then(response => {
67+
return response.json();
68+
}).then(data => {
69+
this.laravelData = data;
70+
});
71+
}
72+
}
73+
74+
});
75+
```
76+
77+
### :white_check_mark: :book: Props
78+
79+
| Name | Type | Description |
80+
| --- | --- | --- |
81+
| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.4/pagination) response. See below for default value. |
82+
| `limit` | Number | (optional) Limit of pages to be rendered. Default `0` (unlimited links) `-1` will hide numeric pages and leave only arrow navigation. `3` will show 3 previous and 3 next numeric pages from current page. |
83+
| `showDisabled` | Boolean | (optional) If set to true, will display left and right icons always. |
84+
| `icon` | String | (optional) Default is `angle double`; Refer [Semantic-UI Icons](https://semantic-ui.com/elements/icon.html) for specifying which icons you want. |
85+
| `size` | String | (optional) Default is `small`; Refer [Semantic-UI Menu Pagination](https://semantic-ui.com/collections/menu.html#pagination) for specifying the size of paginator. |
86+
87+
```javascript
88+
{
89+
current_page: 1,
90+
data: [],
91+
from: 1,
92+
last_page: 1,
93+
next_page_url: null,
94+
per_page: 10,
95+
prev_page_url: null,
96+
to: 1,
97+
total: 0,
98+
}
99+
```
100+
101+
### :white_check_mark: :ear: Events
102+
103+
| Name | Description |
104+
| --- | --- |
105+
| `change-page` | Triggered when a user changes page. Passes the new `page` index as a parameter. |
106+
107+
108+
## NPM :octocat:
109+
110+
[![NPM](https://nodei.co/npm/vuejs-image.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vuejs-image/)

‎package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "laravel-vue-semantic-ui-pagination",
3+
"description": "A VueJS 2.x pagination used with Laravel & Semantic-UI",
4+
"version": "1.0.0",
5+
"author": "Vinayak Kulkarni <[email protected]>",
6+
"private": false,
7+
"main": "src/laravel-vue-semantic-ui-pagination.js",
8+
"keywords": [
9+
"laravel",
10+
"semantic-ui",
11+
"vuejs",
12+
"paginator",
13+
"pagination"
14+
],
15+
"repository": {
16+
"type": "git",
17+
"url": "git+https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination.git"
18+
},
19+
"scripts": {
20+
"test": "karma start karma.conf.js",
21+
"test-watch": "karma start karma.conf.js --no-single-run"
22+
},
23+
"devDependencies": {
24+
"aliasify": "^2.1.0",
25+
"babel-preset-es2015": "^6.18.0",
26+
"babelify": "^7.3.0",
27+
"browserify": "^13.3.0",
28+
"jasmine-core": "^2.5.2",
29+
"karma": "^1.3.0",
30+
"karma-browserify": "^5.1.0",
31+
"karma-jasmine": "^1.1.0",
32+
"karma-phantomjs-launcher": "^1.0.2",
33+
"karma-spec-reporter": "^0.0.26",
34+
"phantomjs-prebuilt": "^2.1.14",
35+
"vue": "^2.1.8",
36+
"watchify": "^3.8.0"
37+
},
38+
"license": "MIT",
39+
"bugs": {
40+
"url": "https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination/issues"
41+
},
42+
"homepage": "https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination#readme"
43+
}

‎src/laravel-vue-semantic-ui-pagination.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
module.exports = {
2+
3+
template: `<div class="ui pagination menu" :class="size" v-if="data.total > data.per_page">
4+
<!-- First Item -->
5+
<a class="item" @click.prevent="selectPage(--data.current_page)" v-if="data.prev_page_url">
6+
<i class="left icon" :class="icon"></i>
7+
</a>
8+
<a class="disabled item" v-if="showDisabled && !data.prev_page_url">
9+
<i class="left icon" :class="icon"></i>
10+
</a>
11+
12+
<!-- Pagination Menu Items -->
13+
<a class="item" v-for="n in getPages()" :class="{ \'active\': n == data.current_page }" @click.prevent="selectPage(n)">
14+
{{ n }}
15+
</a>
16+
17+
<!-- Last Item -->
18+
<a class="item" @click.prevent="selectPage(++data.current_page)" v-if="data.next_page_url">
19+
<i class="right icon" :class="icon"></i>
20+
</a>
21+
<a class="disabled item" v-if="showDisabled && !data.next_page_url">
22+
<i class="right icon" :class="icon"></i>
23+
</a>
24+
</div>`,
25+
26+
27+
props: {
28+
showDisabled: {
29+
type: Boolean,
30+
default: false,
31+
required: false
32+
},
33+
icon: {
34+
type: String,
35+
default: 'angle double',
36+
required: false
37+
},
38+
size: {
39+
type: String,
40+
default: 'small',
41+
required: false
42+
},
43+
data: {
44+
type: Object,
45+
default: function() {
46+
return {
47+
current_page: 1,
48+
data: [],
49+
from: 1,
50+
last_page: 1,
51+
next_page_url: null,
52+
per_page: 10,
53+
prev_page_url: null,
54+
to: 1,
55+
total: 0,
56+
}
57+
},
58+
required: true
59+
},
60+
limit: {
61+
type: Number,
62+
default: 0,
63+
required: false
64+
}
65+
},
66+
67+
methods: {
68+
selectPage: function(page) {
69+
this.$emit('change-page', page);
70+
},
71+
getPages: function() {
72+
if (this.limit === -1) {
73+
return 0;
74+
}
75+
76+
if (this.limit === 0) {
77+
return this.data.last_page;
78+
}
79+
80+
var start = this.data.current_page - this.limit,
81+
end = this.data.current_page + this.limit + 1,
82+
pages = [],
83+
index;
84+
85+
start = start < 1 ? 1 : start;
86+
end = end >= this.data.last_page ? this.data.last_page + 1 : end;
87+
88+
for (index = start; index < end; index++) {
89+
pages.push(index);
90+
}
91+
92+
return pages;
93+
}
94+
}
95+
};

‎test/laravel-vue-semantic-ui-pagination.spec.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
const Vue = require('vue');
2+
const LaravelVuePagination = require('../src/laravel-vue-semantic-ui-pagination');
3+
4+
function getComponent(Component, propsData) {
5+
const Ctor = Vue.extend(Component);
6+
return new Ctor({ propsData }).$mount();
7+
}
8+
9+
var exampleData = {
10+
current_page: 1,
11+
data: [
12+
{ id: 1 },
13+
{ id: 2 },
14+
{ id: 3 },
15+
{ id: 4 },
16+
{ id: 5 },
17+
{ id: 6 },
18+
{ id: 7 },
19+
{ id: 8 },
20+
{ id: 9 },
21+
{ id: 10 },
22+
{ id: 11 },
23+
],
24+
from: 1,
25+
last_page: 6,
26+
next_page_url: 'http://semantic-ui.com/page/2',
27+
per_page: 2,
28+
prev_page_url: null,
29+
to: 3,
30+
total: 11,
31+
};
32+
33+
describe('LaravelVueSemanticUIPagination', function() {
34+
it('has correct DOM structure', function() {
35+
const vm = getComponent(LaravelVuePagination, {
36+
data: exampleData
37+
});
38+
39+
expect(vm.$el.nodeName).toBe('DIV');
40+
expect(vm.$el.getElementsByTagName('a').length).toBe(7);
41+
expect(vm.$el.getElementsByTagName('a')[0].classList).toContain('active');
42+
});
43+
44+
it('has icons in paginator menu', function() {
45+
exampleData.showDisabled = true;
46+
exampleData.icon = 'chevron';
47+
const vm = getComponent(LaravelVuePagination, {
48+
data: exampleData,
49+
});
50+
51+
expect(vm.$el.nodeName).toBe('DIV');
52+
expect(vm.$el.getElementsByTagName('i')[0].classList).toContain('icon');
53+
});
54+
55+
it('has correct DOM structure with 1 link limit on page 3', function() {
56+
exampleData.current_page = 3;
57+
exampleData.next_page_url = 'http://semantic-ui.com/page/4';
58+
exampleData.prev_page_url = 'http://semantic-ui.com/page/2';
59+
60+
const vm = getComponent(LaravelVuePagination, {
61+
data: exampleData,
62+
limit: 1
63+
});
64+
65+
expect(vm.$el.nodeName).toBe('DIV');
66+
expect(vm.$el.getElementsByTagName('a').length).toBe(5);
67+
expect(vm.$el.getElementsByTagName('a')[2].classList).toContain('active');
68+
});
69+
70+
it('has correct DOM structure when on page 2', function() {
71+
exampleData.current_page = 2;
72+
exampleData.next_page_url = 'http://semantic-ui.com/page/3';
73+
exampleData.prev_page_url = 'http://semantic-ui.com/page/1';
74+
75+
const vm = getComponent(LaravelVuePagination, {
76+
data: exampleData
77+
});
78+
79+
expect(vm.$el.getElementsByTagName('a').length).toBe(8);
80+
expect(vm.$el.getElementsByTagName('a')[2].classList).toContain('active');
81+
});
82+
83+
it('emits correct event', function(done) {
84+
const vm = getComponent(LaravelVuePagination, {
85+
data: exampleData
86+
});
87+
88+
vm.$on('change-page', function (page) {
89+
expect(page).toBe(2);
90+
done();
91+
});
92+
93+
vm.selectPage(2);
94+
});
95+
});

0 commit comments

Comments
 (0)