Initial commit

Author: gilbitron

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Gilbert Pellegrom
+
+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,93 @@
+# Laravel Vue Pagination
+A Vue.js pagination component for Laravel paginators that works with Bootstrap.
+
+## Requirements
+
+* [Vue.js](https://vuejs.org/) 2.x
+* [Laravel](http://laravel.com/docs/) 5.x
+* [Bootstrap](http://getbootstrap.com/) 3.x
+
+## Usage
+
+Register the component:
+
+```
+Vue.component('pagination', require('laravel-vue-pagination'));
+```
+
+Use the component:
+
+```
+<pagination ref="paginator" :data="laravelData"></pagination>
+```
+
+```
+Vue.component('example-component', {
+
+	data() {
+		return {
+			// Our data object that holds the Laravel paginator data
+			laravelData: {},
+		}
+	},
+
+	created() {
+		// Set up the pagination event listener
+		this.$refs.paginator.$on('pagination-change-page', this.getResults);
+
+		// Fetch initial results
+		this.getResults();
+	},
+
+	methods: {
+		// Our method to GET results from a Laravel endpoint
+		getResults(page) {
+			if (typeof page === 'undefined') {
+				page = 1;
+			}
+
+			// Using vue-resource as an example
+			this.$http.get('example/results')
+				.then(response => {
+					return response.json();
+				}).then(data => {
+					this.laravelData = data;
+				});
+		}
+	}
+
+});
+```
+
+## API
+
+### Props
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.3/pagination) response. See below for default value. |
+
+```
+{
+	current_page: 1,
+	data: [],
+	from: 1,
+	last_page: 1,
+	next_page_url: null,
+	per_page: 10,
+	prev_page_url: null,
+	to: 1,
+	total: 0,
+}
+```
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `pagination-change-page` | Triggered when a user changes page. Passes the new `page` index as a parameter. |
+
+## Credits
+
+Laravel Vue Pagination was created by [Gilbert Pellegrom](http://gilbert.pellegrom.me) from
+[Dev7studios](http://dev7studios.co). Released under the MIT license.

karma.conf.js

@@ -0,0 +1,59 @@
+// Karma configuration
+module.exports = function(config) {
+    config.set({
+
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['jasmine', 'browserify'],
+
+        // list of files / patterns to load in the browser
+        files: [
+          'test/**/*.js'
+        ],
+
+        // list of files to exclude
+        exclude: [
+        ],
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'test/**/*.spec.js': ['browserify']
+        },
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['spec'],
+
+        // web server port
+        port: 9876,
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: true,
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        browsers: ['PhantomJS'],
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: true,
+
+        // Browserify config
+        browserify: {
+            transform: [['babelify', { presets: ['es2015'] }], ['aliasify', { aliases: { 'vue': 'vue/dist/vue.js' }}]],
+            debug: true
+        }
+    })
+}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "laravel-vue-pagination",
+  "version": "1.0.0",
+  "description": "Vue.js pagination component for Laravel paginators and Bootstrap styles",
+  "author": "Gilbert Pellegrom <[email protected]>",
+  "homepage": "https://github.com/gilbitron/laravel-vue-pagination",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "component",
+    "bootstrap",
+    "laravel",
+    "pagination"
+  ],
+  "main": "src/laravel-vue-pagination.js",
+  "scripts": {
+    "test": "karma start karma.conf.js",
+    "test-watch": "karma start karma.conf.js --no-single-run"
+  },
+  "devDependencies": {
+    "aliasify": "^2.1.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.3.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.3.0",
+    "karma-browserify": "^5.1.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-spec-reporter": "^0.0.26",
+    "phantomjs-prebuilt": "^2.1.14",
+    "vue": "^2.1.8",
+    "watchify": "^3.8.0"
+  }
+}

src/laravel-vue-pagination.js

@@ -0,0 +1,36 @@
+module.exports = {
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {
+					current_page: 1,
+					data: [],
+					from: 1,
+					last_page: 1,
+					next_page_url: null,
+					per_page: 10,
+					prev_page_url: null,
+					to: 1,
+					total: 0,
+				}
+			}
+		}
+	},
+
+	template: '<ul class="pagination" v-if="data.total > data.per_page">' +
+	'	<li v-if="data.prev_page_url">' +
+	'		<a href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)"><span aria-hidden="true">&laquo;</span></a>' +
+	'	</li>' +
+	'	<li v-for="n in data.last_page" :class="{ \'active\': n == data.current_page }"><a href="#" @click.prevent="selectPage(n)">{{ n }}</a></li>' +
+	'	<li v-if="data.next_page_url">' +
+	'		<a href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)"><span aria-hidden="true">&raquo;</span></a>' +
+	'	</li>' +
+	'</ul>',
+
+	methods: {
+		selectPage(page) {
+			this.$emit('pagination-change-page', page);
+		}
+	}
+};

test/laravel-vue-pagination.spec.js

@@ -0,0 +1,62 @@
+const Vue = require('vue');
+const LaravelVuePagination = require('../src/laravel-vue-pagination');
+
+function getComponent(Component, propsData) {
+	const Ctor = Vue.extend(Component);
+	return new Ctor({ propsData }).$mount();
+}
+
+var exampleData = {
+	current_page: 1,
+	data: [
+		{ id: 1 },
+		{ id: 2 },
+		{ id: 3 },
+		{ id: 4 },
+		{ id: 5 },
+	],
+	from: 1,
+	last_page: 3,
+	next_page_url: 'http://example.com/page/2',
+	per_page: 2,
+	prev_page_url: null,
+	to: 3,
+	total: 5,
+};
+
+describe('LaravelVuePagination', function() {
+	it('has correct DOM structure', function() {
+		const vm = getComponent(LaravelVuePagination, {
+			data: exampleData
+		});
+
+		expect(vm.$el.nodeName).toBe('UL');
+		expect(vm.$el.getElementsByTagName('li').length).toBe(4);
+		expect(vm.$el.getElementsByTagName('li')[0].classList).toContain('active');
+	});
+
+	it('has correct DOM structure when on page 2', function() {
+		exampleData.current_page = 2;
+		exampleData.next_page_url = 'http://example.com/page/1';
+		exampleData.prev_page_url = 'http://example.com/page/3';
+
+		const vm = getComponent(LaravelVuePagination, {
+			data: exampleData
+		});
+
+		expect(vm.$el.getElementsByTagName('li').length).toBe(5);
+		expect(vm.$el.getElementsByTagName('li')[2].classList).toContain('active');
+	});
+
+	it('emits correct event', function() {
+		const vm = getComponent(LaravelVuePagination, {
+			data: exampleData
+		});
+
+		vm.$on('pagination-change-page', function (page) {
+			expect(page).toBe(2);
+		});
+
+		vm.selectPage(2);
+	});
+});