diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c51ff9c..0000000 --- a/.babelrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "presets": [ - ["env", { "modules": false }], - "stage-3" - ], - "env": { - "test": { - "presets": [ - ["env", { "targets": { "node": 8 }}] - ] - } - } -} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..6a9d8c4 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + root: true, + env: { + node: true, + }, + extends: [ + 'plugin:vue/essential', + '@vue/airbnb', + ], + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + }, + parserOptions: { + parser: 'babel-eslint', + }, +}; diff --git a/.gitignore b/.gitignore index e6dfc92..37da0a3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store node_modules/ -public/dist/ +dist/ coverage/ npm-debug.log yarn-error.log diff --git a/.travis.yml b/.travis.yml index 06a1b4d..bb3bfa1 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,4 +9,4 @@ cache: install: - yarn install script: - - yarn run test \ No newline at end of file + - yarn test:unit \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..430fd55 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1 @@ +## Contribute diff --git a/README.md b/README.md index fc85063..36895bf 100644 --- a/README.md +++ b/README.md @@ -29,9 +29,9 @@ $ npm i -S vue-tiny-pagination ```html
-
-### Development
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build docs with minification
-npm run compile:docs
-
-# build project
-npm run build
-
-# run tests
-npm run test
-```
-
-### What's Included
-
-- `npm run dev`: Webpack + `vue-loader` with proper config for source maps & hot-reload.
-
-- `npm run build`: build with HTML/CSS/JS minification.
-
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). Also check out the [breaking changes in vue-loader@9.0.0](https://github.com/vuejs/vue-loader/releases/tag/v9.0.0).
-
### Contributions
All contributions are welcome send your PR and Issues.
### License
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-tiny-pagination/master/LICENSE)
-##### Crafted by Javier Diaz
+##### Crafted by Javier Diaz
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..91be244
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/app',
+ ],
+};
diff --git a/build/rollup.config.js b/build/rollup.config.js
deleted file mode 100644
index 2617565..0000000
--- a/build/rollup.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import vue from 'rollup-plugin-vue'
-import buble from 'rollup-plugin-buble'
-import uglify from 'rollup-plugin-uglify-es'
-
-export default {
- input: 'index.js',
- output: {
- name: 'VueTinyPagination',
- exports: 'named'
- },
- plugins: [
- vue({
- css: true,
- compileTemplate: true
- }),
- buble(),
- uglify()
- ]
-}
diff --git a/dist/vue-tiny-pagination.esm.js b/dist/vue-tiny-pagination.esm.js
deleted file mode 100644
index c87efba..0000000
--- a/dist/vue-tiny-pagination.esm.js
+++ /dev/null
@@ -1 +0,0 @@
-function install(t){install.installed||(install.installed=!0,t.component("TinyPagination",TinyPagination))}!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style"),n='@charset "UTF-8"; .tiny-pagination { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; display: flex; list-style: none; margin: .2rem 0; padding: .2rem 0; } .tiny-pagination .page-item { margin: .2rem .05rem; } .tiny-pagination .page-item span { display: inline-block; padding: .2rem .2rem; } .tiny-pagination .page-item a { border-radius: .1rem; color: #667189; display: inline-block; padding: .2rem .4rem; text-decoration: none; } .tiny-pagination .page-item a:focus, .tiny-pagination .page-item a:hover { color: #5755d9; } .tiny-pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none; } .tiny-pagination .page-item.active a { background: #5755d9; color: #fff; } .tiny-pagination .page-item.page-prev, .tiny-pagination .page-item.page-next { flex: 1 0 50%; } .tiny-pagination .page-item.page-next { text-align: right; } .tiny-pagination .page-item .page-item-title { margin: 0; } .tiny-pagination .page-item .page-item-subtitle { margin: 0; opacity: .5; } .tiny-pagination .tiny-form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-transform: lowercase; border: .05rem solid #caced7; border-radius: .1rem; font-size: .8rem; height: 1.8rem; line-height: 1rem; outline: none; padding: .35rem .4rem; vertical-align: middle; width: 100%; } .tiny-pagination .tiny-form-select:focus { border-color: #5755d9; box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); } .tiny-pagination .tiny-form-select:not([multiple]):not([size]) { background: #fff url(\'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns="http://www.w3.org/2000/svg"…path%20fill="%23667189"%20d="M2%200L0%202h4zm0%205L0%203h4z"/%3E%3C/svg%3E\') no-repeat right 0.35rem center/0.4rem 0.5rem; padding-right: 1.2rem; } ';e.type="text/css",e.styleSheet?e.styleSheet.cssText=n:e.appendChild(document.createTextNode(n)),t.appendChild(e)}}();var TinyPagination={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tiny-pagination"},[n("ul",{staticClass:"tiny-pagination",class:t.customClass},[n("li",{staticClass:"page-item",class:t.classFirstPage},[n("a",{staticClass:"btn-prev-page",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.lastPage(e)}}},[t._v(t._s(t.translation.prev))])]),t._v(" "),n("li",{staticClass:"page-item"},[n("span",[t._v(t._s(t.titlePage))])]),t._v(" "),n("li",{staticClass:"page-item",class:t.classLastPage},[n("a",{staticClass:"btn-next-page",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.nextPage(e)}}},[t._v(t._s(t.translation.next))])]),t._v(" "),t.showLimit?n("li",{staticClass:"page-item"},[n("select",{directives:[{name:"model",rawName:"v-model",value:t.currentLimit,expression:"currentLimit"}],staticClass:"tiny-form-select",on:{change:[function(e){var n=Array.prototype.filter.call(e.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});t.currentLimit=e.target.multiple?n:n[0]},t.onLimitChange]}},t._l(t.limits,function(e,i){return n("option",{key:i,domProps:{value:e}},[t._v(t._s(e)+"/"+t._s(t.translation.title))])}))]):t._e()])])},staticRenderFns:[],name:"TinyPagination",props:{total:{type:Number,required:!0},page:{type:Number,default:1},lang:{type:String,default:"en"},customClass:{type:String},limits:{type:Array,default:function(){return[10,15,20,50,100]}},showLimit:{type:Boolean,default:!0}},data:function(){return{version:"0.2.1",currentPage:1,currentLimit:10,translations:{en:{prev:"Previous",title:"Page",next:"Next"},es:{prev:"Anterior",title:"Página",next:"Siguiente"}},availableLanguages:["en","es"]}},created:function(){this.currentPage=this.page},computed:{translation:function(){return this.availableLanguages.includes(this.lang)?this.translations[this.lang]:this.translations.en},totalPages:function(){return Math.ceil(this.total/this.currentLimit)},titlePage:function(){return this.translation.title+" "+this.currentPage},classFirstPage:function(){return{disabled:1===this.currentPage,"c-not-allowed":!0}},classLastPage:function(){return{disabled:this.currentPage===this.totalPages,"c-not-allowed":!0}}},methods:{nextPage:function(){this.currentPage!==this.totalPages&&(this.currentPage+=1)},lastPage:function(){this.currentPage>1&&(this.currentPage-=1)},onLimitChange:function(){this.currentPage=1}},watch:{currentPage:function(t){this.$emit("tiny:change-page",{page:t})},currentLimit:function(t){this.$emit("tiny:change-limit",{limit:t})}}},plugin={install:install},GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin);export default plugin;export{install,TinyPagination};
diff --git a/dist/vue-tiny-pagination.min.js b/dist/vue-tiny-pagination.min.js
deleted file mode 100644
index bb61974..0000000
--- a/dist/vue-tiny-pagination.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var VueTinyPagination=function(t){"use strict";function e(t){e.installed||(e.installed=!0,t.component("TinyPagination",n))}!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style"),n='@charset "UTF-8"; .tiny-pagination { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; display: flex; list-style: none; margin: .2rem 0; padding: .2rem 0; } .tiny-pagination .page-item { margin: .2rem .05rem; } .tiny-pagination .page-item span { display: inline-block; padding: .2rem .2rem; } .tiny-pagination .page-item a { border-radius: .1rem; color: #667189; display: inline-block; padding: .2rem .4rem; text-decoration: none; } .tiny-pagination .page-item a:focus, .tiny-pagination .page-item a:hover { color: #5755d9; } .tiny-pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none; } .tiny-pagination .page-item.active a { background: #5755d9; color: #fff; } .tiny-pagination .page-item.page-prev, .tiny-pagination .page-item.page-next { flex: 1 0 50%; } .tiny-pagination .page-item.page-next { text-align: right; } .tiny-pagination .page-item .page-item-title { margin: 0; } .tiny-pagination .page-item .page-item-subtitle { margin: 0; opacity: .5; } .tiny-pagination .tiny-form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-transform: lowercase; border: .05rem solid #caced7; border-radius: .1rem; font-size: .8rem; height: 1.8rem; line-height: 1rem; outline: none; padding: .35rem .4rem; vertical-align: middle; width: 100%; } .tiny-pagination .tiny-form-select:focus { border-color: #5755d9; box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); } .tiny-pagination .tiny-form-select:not([multiple]):not([size]) { background: #fff url(\'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns="http://www.w3.org/2000/svg"…path%20fill="%23667189"%20d="M2%200L0%202h4zm0%205L0%203h4z"/%3E%3C/svg%3E\') no-repeat right 0.35rem center/0.4rem 0.5rem; padding-right: 1.2rem; } ';e.type="text/css",e.styleSheet?e.styleSheet.cssText=n:e.appendChild(document.createTextNode(n)),t.appendChild(e)}}();var n={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tiny-pagination"},[n("ul",{staticClass:"tiny-pagination",class:t.customClass},[n("li",{staticClass:"page-item",class:t.classFirstPage},[n("a",{staticClass:"btn-prev-page",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.lastPage(e)}}},[t._v(t._s(t.translation.prev))])]),t._v(" "),n("li",{staticClass:"page-item"},[n("span",[t._v(t._s(t.titlePage))])]),t._v(" "),n("li",{staticClass:"page-item",class:t.classLastPage},[n("a",{staticClass:"btn-next-page",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.nextPage(e)}}},[t._v(t._s(t.translation.next))])]),t._v(" "),t.showLimit?n("li",{staticClass:"page-item"},[n("select",{directives:[{name:"model",rawName:"v-model",value:t.currentLimit,expression:"currentLimit"}],staticClass:"tiny-form-select",on:{change:[function(e){var n=Array.prototype.filter.call(e.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});t.currentLimit=e.target.multiple?n:n[0]},t.onLimitChange]}},t._l(t.limits,function(e,i){return n("option",{key:i,domProps:{value:e}},[t._v(t._s(e)+"/"+t._s(t.translation.title))])}))]):t._e()])])},staticRenderFns:[],name:"TinyPagination",props:{total:{type:Number,required:!0},page:{type:Number,default:1},lang:{type:String,default:"en"},customClass:{type:String},limits:{type:Array,default:function(){return[10,15,20,50,100]}},showLimit:{type:Boolean,default:!0}},data:function(){return{version:"0.2.1",currentPage:1,currentLimit:10,translations:{en:{prev:"Previous",title:"Page",next:"Next"},es:{prev:"Anterior",title:"Página",next:"Siguiente"}},availableLanguages:["en","es"]}},created:function(){this.currentPage=this.page},computed:{translation:function(){return this.availableLanguages.includes(this.lang)?this.translations[this.lang]:this.translations.en},totalPages:function(){return Math.ceil(this.total/this.currentLimit)},titlePage:function(){return this.translation.title+" "+this.currentPage},classFirstPage:function(){return{disabled:1===this.currentPage,"c-not-allowed":!0}},classLastPage:function(){return{disabled:this.currentPage===this.totalPages,"c-not-allowed":!0}}},methods:{nextPage:function(){this.currentPage!==this.totalPages&&(this.currentPage+=1)},lastPage:function(){this.currentPage>1&&(this.currentPage-=1)},onLimitChange:function(){this.currentPage=1}},watch:{currentPage:function(t){this.$emit("tiny:change-page",{page:t})},currentLimit:function(t){this.$emit("tiny:change-limit",{limit:t})}}},i={install:e},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(i),t.install=e,t.TinyPagination=n,t.default=i,t}({});
diff --git a/dist/vue-tiny-pagination.umd.js b/dist/vue-tiny-pagination.umd.js
deleted file mode 100644
index a777cb1..0000000
--- a/dist/vue-tiny-pagination.umd.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueTinyPagination={})}(this,function(e){"use strict";function t(e){t.installed||(t.installed=!0,e.component("TinyPagination",n))}!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),n='@charset "UTF-8"; .tiny-pagination { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; display: flex; list-style: none; margin: .2rem 0; padding: .2rem 0; } .tiny-pagination .page-item { margin: .2rem .05rem; } .tiny-pagination .page-item span { display: inline-block; padding: .2rem .2rem; } .tiny-pagination .page-item a { border-radius: .1rem; color: #667189; display: inline-block; padding: .2rem .4rem; text-decoration: none; } .tiny-pagination .page-item a:focus, .tiny-pagination .page-item a:hover { color: #5755d9; } .tiny-pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none; } .tiny-pagination .page-item.active a { background: #5755d9; color: #fff; } .tiny-pagination .page-item.page-prev, .tiny-pagination .page-item.page-next { flex: 1 0 50%; } .tiny-pagination .page-item.page-next { text-align: right; } .tiny-pagination .page-item .page-item-title { margin: 0; } .tiny-pagination .page-item .page-item-subtitle { margin: 0; opacity: .5; } .tiny-pagination .tiny-form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-transform: lowercase; border: .05rem solid #caced7; border-radius: .1rem; font-size: .8rem; height: 1.8rem; line-height: 1rem; outline: none; padding: .35rem .4rem; vertical-align: middle; width: 100%; } .tiny-pagination .tiny-form-select:focus { border-color: #5755d9; box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2); } .tiny-pagination .tiny-form-select:not([multiple]):not([size]) { background: #fff url(\'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns="http://www.w3.org/2000/svg"…path%20fill="%23667189"%20d="M2%200L0%202h4zm0%205L0%203h4z"/%3E%3C/svg%3E\') no-repeat right 0.35rem center/0.4rem 0.5rem; padding-right: 1.2rem; } ';t.type="text/css",t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n)),e.appendChild(t)}}();var n={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue-tiny-pagination"},[n("ul",{staticClass:"tiny-pagination",class:e.customClass},[n("li",{staticClass:"page-item",class:e.classFirstPage},[n("a",{staticClass:"btn-prev-page",attrs:{href:"#"},on:{click:function(t){t.preventDefault(),e.lastPage(t)}}},[e._v(e._s(e.translation.prev))])]),e._v(" "),n("li",{staticClass:"page-item"},[n("span",[e._v(e._s(e.titlePage))])]),e._v(" "),n("li",{staticClass:"page-item",class:e.classLastPage},[n("a",{staticClass:"btn-next-page",attrs:{href:"#"},on:{click:function(t){t.preventDefault(),e.nextPage(t)}}},[e._v(e._s(e.translation.next))])]),e._v(" "),e.showLimit?n("li",{staticClass:"page-item"},[n("select",{directives:[{name:"model",rawName:"v-model",value:e.currentLimit,expression:"currentLimit"}],staticClass:"tiny-form-select",on:{change:[function(t){var n=Array.prototype.filter.call(t.target.options,function(e){return e.selected}).map(function(e){return"_value"in e?e._value:e.value});e.currentLimit=t.target.multiple?n:n[0]},e.onLimitChange]}},e._l(e.limits,function(t,i){return n("option",{key:i,domProps:{value:t}},[e._v(e._s(t)+"/"+e._s(e.translation.title))])}))]):e._e()])])},staticRenderFns:[],name:"TinyPagination",props:{total:{type:Number,required:!0},page:{type:Number,default:1},lang:{type:String,default:"en"},customClass:{type:String},limits:{type:Array,default:function(){return[10,15,20,50,100]}},showLimit:{type:Boolean,default:!0}},data:function(){return{version:"0.2.1",currentPage:1,currentLimit:10,translations:{en:{prev:"Previous",title:"Page",next:"Next"},es:{prev:"Anterior",title:"Página",next:"Siguiente"}},availableLanguages:["en","es"]}},created:function(){this.currentPage=this.page},computed:{translation:function(){return this.availableLanguages.includes(this.lang)?this.translations[this.lang]:this.translations.en},totalPages:function(){return Math.ceil(this.total/this.currentLimit)},titlePage:function(){return this.translation.title+" "+this.currentPage},classFirstPage:function(){return{disabled:1===this.currentPage,"c-not-allowed":!0}},classLastPage:function(){return{disabled:this.currentPage===this.totalPages,"c-not-allowed":!0}}},methods:{nextPage:function(){this.currentPage!==this.totalPages&&(this.currentPage+=1)},lastPage:function(){this.currentPage>1&&(this.currentPage-=1)},onLimitChange:function(){this.currentPage=1}},watch:{currentPage:function(e){this.$emit("tiny:change-page",{page:e})},currentLimit:function(e){this.$emit("tiny:change-limit",{limit:e})}}},i={install:t},a=null;"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(i),e.install=t,e.TinyPagination=n,e.default=i,Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/index.html b/index.html
deleted file mode 100644
index 0020fc7..0000000
--- a/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
- - GitHub | Latest version: -
-- This component provides a basic styles for pagination and a minimalistic design. This pagination can be used for paginate tables, data lists, etc. -
-
-
Install with NPM
-$npm install vue-tiny-pagination --save
- Install with Yarn
-$yarn add vue-tiny-pagination
- <div id="app">
- <tiny-pagination>
- :total="total"
- @tiny:change-page="changePage"></tiny-pagination>
-</div>
- import Vue from 'vue'
-import TinyPagination from 'vue-tiny-pagination'
-
-new Vue({
- el: '#app',
- data () {
- return {
- total: 100,
- currentPage: 1
- }
- },
- methods: {
- changePage (pagination) {
- console.log(pagination.page)
- }
- },
- components: {
- TinyPagination
- }
-})
- | Id | -First Name | -Last name | -- |
|---|---|---|---|
| {{user.id}} | -{{user.first_name}} | -{{user.last_name}} | -
- |
-
| Prop | -Type | -Default | -Description | -
|---|---|---|---|
| total (required) | -Number | -- | -A number of total items. | -
| page | -Number | -1 | -Prop to set a default page. | -
| lang | -String | -en | -Default language to show (Available: en, es). | -
| customClass | -String | -"" | -Prop to set a custom class. | -
| limits | -Array | -[10, 15, 20, 50, 100] | -Prop to set a default limits to page sizes. | -
| showLimit | -Boolean | -true | -Prop to disable the limit selector. | -
| Event | -Description | -
|---|---|
| tiny:change-page | -Get the current page from pagination payload: {page: 1}. |
-
| tiny:change-limit | -Get the current limit from pagination payload: {limit: 10}. |
-
February, 2017
-[v0.1.0] Initial commit and first release.
-[v0.1.1] Updated typo on README.md.
-[v0.1.2] Changed default pageSize from 15 to 10. Added cursor not-allowed for disabled page-items.
[v0.2.0] Added prop for items per page and event for $emit the current limit (payload: {limit: 10}). Added testing for minor functionality.
[v0.2.1] Added builds for use in browser and refactoring project structure.
-[v0.2.2] Now you can disable a limit selector using a showLimit prop.
March, 2017
-[v0.2.1] Added builds for use in browser and refactoring project structure.
-