First commit

LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+Copyright (c) 2016 Taha Shashtari <taha@taha-sh.com>
+
+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,130 @@
+# vue-paginate
+
+> This plugin helps you use pagination on lists within seconds!
+
+It's basically a directive with a bunch of methods defined on the vm. When you
+use this directive on some list, it'll be sliced according to the number of
+items per page, which you specify. Then, you'll work with those slices using the
+methods & data that automatically gets defined on the vm — not all vms, only the
+one you used the directive in.
+
+## Setup
+
+```
+npm install vue-paginate --save
+```
+
+You have two ways to setup *vue-paginate*:
+
+#### CommonJS (Webpack/Browserify)
+
+- ES6
+
+```js
+import VuePaginate from 'vue-paginate'
+Vue.use(VuePaginate)
+```
+
+- ES5
+
+```js
+var VuePaginate = require('vue-paginate')
+Vue.use(VuePaginate)
+```
+
+#### Include
+
+Include it directly with a `<script>` tag. In this case, you don't need to write
+`Vue.use(VuePaginate)`, this will be done automatically for you.
+
+## Usage
+
+Here's an example:
+
+```js
+new Vue({
+  el: '#app',
+  data: {
+    langs: ['PHP', 'JavaScript', 'HTML', 'CSS', 'Ruby', 'Python']
+  }
+});
+```
+
+```html
+<!-- data -->
+<ul v-paginate:3="langs">
+  <li v-for="lang in langs">
+    {{ lang }}
+  </li>
+</ul>
+
+<!-- links -->
+<ul>
+  <li v-for="langLink in langsLinks">
+    <a @click="changeLangsPage(langLink)" href="#">
+      {{ langLink + 1 }}
+    </a>
+  </li>
+</ul>
+```
+
+That's it!
+
+#### How it works?
+
+When you try the previous example, you'll get two pages, each one contains three
+items. We specified that by using `:3` argument, which means we want to show 3
+items per page!
+
+In the links section, we used a variable named `langsLinks`. This one is
+generated for us by the plugin, which follows the convention `[listName]Links`.
+This variable contains the total number of pages needed to display the whole
+list.
+
+To show the links, we ran a loop — to get all page numbers, from zero to the
+last one — and used each one in the method `changeLangsPage()` (which also
+follows a convention: `change[listName]Page`). This method takes the page number
+and return all items in that page.
+
+#### Use Next/Prev buttons
+
+In some cases, you'll want to navigate pages using next/prev links instead of
+page numbers.
+
+To do that, all you have to do is to use the methods `next[listName]Page` &
+`prev[listName]Page`.
+
+Like this:
+
+```html
+<!-- links -->
+<a @click="prevLangsPage()" href="#">
+  Prev
+</a>
+
+<a @click="nextLangsPage()" href="#">
+  Next
+</a>
+```
+
+#### Accessing the full version
+
+This plugin operates on the original data that you've defined in your vm. This
+means, you'll no longer have access to the full version (before slicing).
+
+However, before the plugin does its slicing, it stores the full version in
+another list named `full[listName]`. So for this example it would be
+`fullLangs`.
+
+## Conventions
+
+#### Methods
+
+- `change[listName]Page`: Go to a specific page (using the page number).
+- `next[listName]Page`: Go to the next page.
+- `prev[listName]Page`: Go to the previous page.
+
+#### Data
+
+- `[listName]Links`: The total number of pages of the list.
+- `full[listName]`: The full version of the list (before slicing).

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vue-paginate",
+  "version": "1.0.0",
+  "description": "A simple vue.js plugin to paginate data",
+  "main": "vue-paginate.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TahaSh/vue-paginate.git"
+  },
+  "keywords": [
+    "paginate",
+    "pagination",
+    "page",
+    "chunk",
+    "navigate",
+    "slice",
+    "vue"
+  ],
+  "dependencies": {
+    "vue": "^1.0.16"
+  },
+  "author": "Taha Shashtari",
+  "license": "MIT"
+}

vue-paginate.js

@@ -0,0 +1,99 @@
+;(function () {
+
+    var state = {};
+
+    // The initial list (before it's sliced)
+    var originalLists = {};
+
+    var vuePaginate = {};
+
+    var helpers = {
+        capitalize: function (string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+    };
+
+    vuePaginate.install = function (Vue) {
+        Vue.directive('paginate', {
+            twoWay: true,
+
+            bind: function() {
+                // Turn off warnings (because we're using vm.$set)
+                Vue.config.silent = true;
+
+                var vm = this.vm;
+                var listName = this.expression;
+                var perPage = +this.arg;
+
+                if (!vm[listName]) {
+                    throw new Error('[vue-paginate] the list name "' + listName + '" is not defined in your vm instance.');
+                }
+
+                originalLists[listName] = vm[listName];
+
+                // Set the full version on the vm
+                vm.$set('full' + helpers.capitalize(listName), originalLists[listName]);
+
+                state[listName] = { currentPage: 0 };
+                state[listName].numberOfItems = originalLists[listName].length;
+                state[listName].perPage = perPage;
+                state[listName].numberOfPages = Math.ceil(state[listName].numberOfItems / state[listName].perPage);
+
+                // Set numberOfPages on the vm instance 
+                // so you can use it in your links section.
+                vm.$set(listName + 'Links', state[listName].numberOfPages);
+
+                vm['change' + helpers.capitalize(listName) + 'Page'] = function (page) {
+                    // Reset the list with original data for two reasons:
+                    // 1. To change it, so the update hook gets triggered.
+                    // 2. To slice it with new positions from the beginning.
+                    vm[listName] = originalLists[listName];
+
+                    state[listName].currentPage = page;
+                };
+
+                // Another way to navigate pages (Next & Prev)
+                vm['next' + helpers.capitalize(listName) + 'Page'] = function() {
+                    vm[listName] = originalLists[listName];
+
+                    state[listName].currentPage = (state[listName].currentPage + 1 < state[listName].numberOfPages) ?
+                        state[listName].currentPage + 1 :
+                        state[listName].currentPage;
+                };
+
+                vm['prev' + helpers.capitalize(listName) + 'Page'] = function() {
+                    vm[listName] = originalLists[listName];
+
+                    state[listName].currentPage = (state[listName].currentPage - 1 > 0) ?
+                        state[listName].currentPage - 1 :
+                        0;
+                };
+
+                // Turn on warnings
+                Vue.config.silent = false;
+            },
+
+            update: function (list) {
+                var listName = this.expression;
+
+                state[listName].currentPage = state[listName].currentPage >= state[listName].numberOfPages ?
+                    state[listName].numberOfPages - 1 : 
+                    state[listName].currentPage;
+
+                var index = state[listName].currentPage * state[listName].perPage;
+
+                this.set(list.slice(index, index + state[listName].perPage));
+            },
+        })
+    }
+
+    if (typeof exports == "object") {
+        module.exports = vuePaginate;
+    } else if (typeof define == "function" && define.amd) {
+        define([], function(){ return vuePaginate });
+    } else if (window.Vue) {
+        window.VuePaginate = vuePaginate;
+        Vue.use(vuePaginate);
+    }
+
+})();