v-page - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

dist/v-page.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vPage",[],t):"object"==typeof exports?exports.vPage=t():e.vPage=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var i={};return t.m=e,t.c=i,t.d=function(e,i,a){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=0)}([function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=i(1);i.d(t,"vPage",function(){return a.a});var n={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object.keys(t).length&&(t.language&&(a.a.props.language.default=t.language),t.align&&(a.a.props.align.default=t.align),"boolean"==typeof t.info&&(a.a.props.info.default=t.info),"boolean"==typeof t.border&&(a.a.props.border.default=t.border),"boolean"==typeof t.pageNumber&&(a.a.props.pageNumber.default=t.pageNumber),"boolean"==typeof t.first&&(a.a.props.first.default=t.first),"boolean"==typeof t.last&&(a.a.props.last.default=t.last),void 0!==t.pageSizeMenu&&(a.a.props.pageSizeMenu.default=t.pageSizeMenu)),e.component(a.a.name,a.a)}};t.default=n},function(e,t,i){"use strict";var a=i(2),n=(i.n(a),i(7)),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e};t.a={name:"v-page",props:{value:{type:Number,default:0},totalRow:{type:Number,default:0},pageSizeMenu:{type:[Boolean,Array],default:function(){return[10,20,50,100]}},language:{type:String,default:"cn"},align:{type:String,default:"right"},disabled:{type:Boolean,default:!1},border:{type:Boolean,default:!0},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0}},data:function(){return{pageSize:!1===this.pageSizeMenu?10:this.pageSizeMenu[0],lastPageSize:-1,currentPage:0,pageNumberSize:5,i18n:n.a[this.language]||n.a.cn}},computed:{totalPage:function(){return Math.ceil(this.totalRow/this.pageSize)},pageNumbers:function(){var e=1,t=void 0,i=Math.floor(this.pageNumberSize/2);return this.totalPage<this.pageNumberSize?t=this.totalPage:this.currentPage<=i?t=this.pageNumberSize:this.currentPage>=this.totalPage-i?(e=this.totalPage-this.pageNumberSize+1,t=this.totalPage):(e=this.currentPage-i,t=e+this.pageNumberSize-1),Array.apply(null,{length:t-e+1}).map(function(t,i){return e+i})},pageInfo:function(){return this.i18n.pageInfo.replace("#pageNumber#",this.currentPage).replace("#totalPage#",this.totalPage).replace("#totalRow#",this.totalRow)},classes:function(){return{"v-pagination--no-border":!this.border,"v-pagination--right":"right"===this.align,"v-pagination--center":"center"===this.align,"v-pagination--disabled":this.disabled}},isFirst:function(){return 1===this.currentPage},isLast:function(){return this.currentPage===this.totalPage}},watch:{value:function(e){"number"==typeof e&&e>0&&this.goPage(e,!1)}},render:function(e){var t=this,i=[];Array.isArray(this.pageSizeMenu)&&this.pageSizeMenu.length&&i.push(e("li",{class:"v-pagination__list"},[e("a",[e("span",this.i18n.pageLength),e("select",{attrs:{disabled:this.disabled},on:{change:function(e){e.srcElement&&e.srcElement.value&&(t.pageSize=Number(e.srcElement.value)),t.goPage()}}},this.pageSizeMenu.map(function(t){return e("option",{attrs:{value:t}},t)}))])])),this.info&&i.push(e("li",{class:"v-pagination__info"},[e("a",this.pageInfo)]));var a=function(i,a,n){return e("li",{class:i},[e("a",{attrs:{href:"javascript:void(0);"},on:{click:function(){return t.switchPage(a)}}},n)])};return this.first&&i.push(a({disabled:this.isFirst},"first",this.i18n.first)),i.push(a({disabled:this.isFirst},"previous",this.i18n.previous)),this.pageNumber&&this.pageNumbers.forEach(function(e){i.push(a({active:e===t.currentPage},e,e))}),i.push(a({disabled:this.isLast},"next",this.i18n.next)),this.last&&i.push(a({disabled:this.isLast},"last",this.i18n.last)),e("div",{class:o({"v-pagination":!0},this.classes)},[e("ul",i)])},methods:{goPage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if("number"==typeof e){var i=e<1?1:e;e>this.totalPage&&this.totalPage>0&&(i=this.totalPage),i===this.currentPage&&this.pageSize===this.lastPageSize||(this.currentPage=i,t&&this.$emit("input",this.currentPage),this.lastPageSize=this.pageSize,this.change())}},reload:function(){this.change()},change:function(){this.$emit("page-change",{pageNumber:this.currentPage,pageSize:Number(this.pageSize)})},position:function(e){if("string"==typeof e)switch(e){case"first":return 1;case"previous":return this.currentPage-1;case"next":return this.currentPage+1;case"last":return this.totalPage}else if("number"==typeof e)return e},switchPage:function(e){this.disabled||this.goPage(this.position(e))}},mounted:function(){this.goPage(this.value?this.value:1)}}},function(e,t,i){var a=i(3);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);i(5)("2dbe92cf",a,!0,{})},function(e,t,i){t=e.exports=i(4)(!1),t.push([e.i,"div.v-pagination{margin:0;display:block}div.v-pagination.v-pagination--right{text-align:right}div.v-pagination.v-pagination--center{text-align:center}div.v-pagination.v-pagination--disabled li a{color:#999;cursor:default}div.v-pagination.v-pagination--disabled li a:hover{color:#999;background-color:#fff;box-shadow:none;z-index:auto}div.v-pagination.v-pagination--disabled li.active a{background-color:#f6f6f6}div.v-pagination>ul{display:inline-block;list-style:none;margin:0;padding:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);-ms-box-shadow:0 1px 2px rgba(0,0,0,.05);-o-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}div.v-pagination>ul>li{text-align:center;margin:0;display:inline}div.v-pagination>ul>li>a{margin:0 0 0 -1px;position:relative;border:1px solid #dee2e6;padding:6px 12px;line-height:1.43;box-shadow:none;background-color:#fff;font-size:14px;display:inline-block;text-decoration:none;color:#333;-webkit-transition:all .5s cubic-bezier(.175,.885,.32,1);-moz-transition:all .5s cubic-bezier(.175,.885,.32,1);-ms-transition:all .5s cubic-bezier(.175,.885,.32,1);-o-transition:all .5s cubic-bezier(.175,.885,.32,1);transition:all .5s cubic-bezier(.175,.885,.32,1)}div.v-pagination>ul>li>a:hover{z-index:2;-webkit-box-shadow:0 0 8px rgba(0,0,0,.2);-moz-box-shadow:0 0 8px rgba(0,0,0,.2);-ms-box-shadow:0 0 8px rgba(0,0,0,.2);-o-box-shadow:0 0 8px rgba(0,0,0,.2);box-shadow:0 0 8px rgba(0,0,0,.2)}div.v-pagination>ul>li.disabled>a,div.v-pagination>ul>li.v-pagination__info>a,div.v-pagination>ul>li.v-pagination__list>a{color:#999;cursor:default}div.v-pagination>ul>li.disabled>a:hover,div.v-pagination>ul>li.v-pagination__info>a:hover,div.v-pagination>ul>li.v-pagination__list>a:hover{color:#999;background-color:#fff;box-shadow:none;z-index:auto}div.v-pagination>ul>li.active>a{cursor:default;color:#999;background-color:#eee}div.v-pagination>ul>li.active>a:hover{box-shadow:none;z-index:auto}div.v-pagination>ul>li:first-child>a{border-left-width:1px;-webkit-border-bottom-left-radius:2px;-moz-border-bottom-left-radius:2px;-ms-border-bottom-left-radius:2px;-o-border-bottom-left-radius:2px;border-bottom-left-radius:2px;-webkit-border-top-left-radius:2px;-moz-border-top-left-radius:2px;-ms-border-top-left-radius:2px;-o-border-top-left-radius:2px;border-top-left-radius:2px}div.v-pagination>ul>li:last-child>a{-webkit-border-top-right-radius:2px;-moz-border-top-right-radius:2px;-ms-border-top-right-radius:2px;-o-border-top-right-radius:2px;border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-right-radius:2px;-ms-border-bottom-right-radius:2px;-o-border-bottom-right-radius:2px;border-bottom-right-radius:2px}div.v-pagination>ul>li.v-pagination__list select{margin-left:5px;width:auto!important;font-size:12px;padding:0;border:1px solid #ccc;color:#333;outline:0}div.v-pagination>ul>li.v-pagination__list select:hover{-webkit-box-shadow:0 0 2px rgba(0,0,0,.2);-moz-box-shadow:0 0 2px rgba(0,0,0,.2);-ms-box-shadow:0 0 2px rgba(0,0,0,.2);-o-box-shadow:0 0 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.2)}div.v-pagination>ul>li.v-pagination__list select[disabled]{color:#999}div.v-pagination.v-pagination--no-border>ul{box-shadow:none}div.v-pagination.v-pagination--no-border>ul>li:not(.active):not(.disabled):not(.v-pagination__info):not(.v-pagination__list) a:hover{box-shadow:none;z-index:auto;background-color:#ddd}div.v-pagination.v-pagination--no-border>ul>li.active a{background-color:#f6f6f6;color:#aaa}div.v-pagination.v-pagination--no-border>ul>li>a{border:0}div.v-pagination.v-pagination--no-border>ul>li>a:hover{z-index:auto}",""])},function(e,t){function i(e,t){var i=e[1]||"",n=e[3];if(!n)return i;if(t&&"function"==typeof btoa){var o=a(n);return[i].concat(n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"})).concat([o]).join("\n")}return[i].join("\n")}function a(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var a=i(t,e);return t[2]?"@media "+t[2]+"{"+a+"}":a}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var a={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(a[o]=!0)}for(n=0;n<e.length;n++){var r=e[n];"number"==typeof r[0]&&a[r[0]]||(i&&!r[2]?r[2]=i:i&&(r[2]="("+r[2]+") and ("+i+")"),t.push(r))}},t}},function(e,t,i){function a(e){for(var t=0;t<e.length;t++){var i=e[t],a=p[i.id];if(a){a.refs++;for(var n=0;n<a.parts.length;n++)a.parts[n](i.parts[n]);for(;n<i.parts.length;n++)a.parts.push(o(i.parts[n]));a.parts.length>i.parts.length&&(a.parts.length=i.parts.length)}else{for(var r=[],n=0;n<i.parts.length;n++)r.push(o(i.parts[n]));p[i.id]={id:i.id,refs:1,parts:r}}}}function n(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function o(e){var t,i,a=document.querySelector("style["+v+'~="'+e.id+'"]');if(a){if(f)return h;a.parentNode.removeChild(a)}if(x){var o=c++;a=g||(g=n()),t=r.bind(null,a,o,!1),i=r.bind(null,a,o,!0)}else a=n(),t=s.bind(null,a),i=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else i()}}function r(e,t,i,a){var n=i?"":a.css;if(e.styleSheet)e.styleSheet.cssText=m(t,n);else{var o=document.createTextNode(n),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(o,r[t]):e.appendChild(o)}}function s(e,t){var i=t.css,a=t.media,n=t.sourceMap;if(a&&e.setAttribute("media",a),b.ssrId&&e.setAttribute(v,t.id),n&&(i+="\n/*# sourceURL="+n.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(6),p={},d=l&&(document.head||document.getElementsByTagName("head")[0]),g=null,c=0,f=!1,h=function(){},b=null,v="data-vue-ssr-id",x="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,i,n){f=i,b=n||{};var o=u(e,t);return a(o),function(t){for(var i=[],n=0;n<o.length;n++){var r=o[n],s=p[r.id];s.refs--,i.push(s)}t?(o=u(e,t),a(o)):o=[];for(var n=0;n<i.length;n++){var s=i[n];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete p[s.id]}}}};var m=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var i=[],a={},n=0;n<t.length;n++){var o=t[n],r=o[0],s=o[1],l=o[2],u=o[3],p={id:e+":"+n,css:s,media:l,sourceMap:u};a[r]?a[r].parts.push(p):i.push(a[r]={id:r,parts:[p]})}return i}},function(e,t,i){"use strict";var a={cn:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页"},en:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# （total #totalRow# records）",first:"First",previous:"«",next:"»",last:"Last"},jp:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ"}};t.a=a}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vPage",[],t):"object"==typeof exports?exports.vPage=t():e.vPage=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var i={};return t.m=e,t.c=i,t.d=function(e,i,a){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=0)}([function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Page=void 0;var a=i(1),n=function(e){return e&&e.__esModule?e:{default:e}}(a),o={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(Object.keys(t).length){var i=n.default.props,a=t.language,o=t.align,r=t.info,s=t.border,l=t.pageNumber,u=t.first,d=t.last,p=t.pageSizeMenu;a&&(i.language.default=a),o&&(i.align.default=o),"boolean"==typeof r&&(i.info.default=r),"boolean"==typeof s&&(i.border.default=s),"boolean"==typeof l&&(i.pageNumber.default=l),"boolean"==typeof u&&(i.first.default=u),"boolean"==typeof d&&(i.last.default=d),void 0!==p&&(i.pageSizeMenu.default=p)}e.component(n.default.name,n.default)}};t.Page=n.default,t.default=o},function(e,t,i){"use strict";function a(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e};i(2);var o=i(7),r=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default={name:"v-page",props:{value:{type:Number,default:0},totalRow:{type:Number,default:0},pageSizeMenu:{type:[Boolean,Array],default:function(){return[10,20,50,100]}},language:{type:String,default:"cn"},align:{type:String,default:"right"},disabled:{type:Boolean,default:!1},border:{type:Boolean,default:!0},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0}},data:function(){return{pageSize:!1===this.pageSizeMenu?10:this.pageSizeMenu[0],lastPageSize:-1,current:0,pageNumberSize:5,i18n:r.default[this.language]||r.default.cn}},computed:{totalPage:function(){return Math.ceil(this.totalRow/this.pageSize)},pageNumbers:function(){var e=this.current,t=this.pageNumberSize,i=this.totalPage,a=Math.floor(t/2),n=e-a;return Array.apply(null,{length:t}).map(function(e,t){return n+t}).filter(function(e){return e>0&&e<=i})},pageInfo:function(){return this.i18n.pageInfo.replace("#pageNumber#",this.current).replace("#totalPage#",this.totalPage).replace("#totalRow#",this.totalRow)},classes:function(){return{"v-pagination--no-border":!this.border,"v-pagination--right":"right"===this.align,"v-pagination--center":"center"===this.align,"v-pagination--disabled":this.disabled}},isFirst:function(){return 1===this.current},isLast:function(){return this.current===this.totalPage}},watch:{value:function(e){"number"==typeof e&&e>0&&this.goPage(e,!1)}},render:function(e){var t=this,i=[];Array.isArray(this.pageSizeMenu)&&this.pageSizeMenu.length&&i.push(e("li",{class:"v-pagination__list"},[e("a",[e("span",this.i18n.pageLength),e("select",{attrs:{disabled:this.disabled},on:{change:function(e){e.srcElement&&e.srcElement.value&&(t.pageSize=Number(e.srcElement.value)),t.goPage()}}},this.pageSizeMenu.map(function(t){return e("option",{attrs:{value:t}},t)}))])])),this.info&&i.push(e("li",{class:"v-pagination__info"},[e("a",this.pageInfo)]));var o=function(i,a,n){return e("li",{class:i},[e("a",{attrs:{href:"javascript:void(0)"},on:{click:function(){return t.goPage(a)}}},n)])};return this.first&&i.push(o({disabled:this.isFirst},1,this.i18n.first)),i.push(o({disabled:this.isFirst},this.current-1,this.i18n.previous)),this.pageNumber&&i.push.apply(i,a(this.pageNumbers.map(function(e){return o({active:e===t.current},e,e)}))),i.push(o({disabled:this.isLast},this.current+1,this.i18n.next)),this.last&&i.push(o({disabled:this.isLast},this.totalPage,this.i18n.last)),e("div",{class:n({"v-pagination":!0},this.classes)},[e("ul",i)])},methods:{goPage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(!this.disabled&&"number"==typeof e){var i=e<1?1:e;e>this.totalPage&&this.totalPage>0&&(i=this.totalPage),i===this.current&&this.pageSize===this.lastPageSize||(this.current=i,t&&this.$emit("input",this.current),this.lastPageSize=this.pageSize,this.change())}},reload:function(){this.change()},change:function(){this.$emit("page-change",{pageNumber:this.current,pageSize:Number(this.pageSize)})}},mounted:function(){this.goPage(this.value?this.value:1)}}},function(e,t,i){var a=i(3);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);i(5)("f316fa44",a,!0,{})},function(e,t,i){t=e.exports=i(4)(!1),t.push([e.i,"div.v-pagination{margin:0;display:block}div.v-pagination.v-pagination--right{text-align:right}div.v-pagination.v-pagination--center{text-align:center}div.v-pagination.v-pagination--disabled li a{color:#999;cursor:default}div.v-pagination.v-pagination--disabled li a:hover{color:#999;background-color:#fff;box-shadow:none;z-index:auto}div.v-pagination.v-pagination--disabled li.active a{background-color:#f6f6f6}div.v-pagination>ul{display:inline-block;list-style:none;margin:0;padding:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);-ms-box-shadow:0 1px 2px rgba(0,0,0,.05);-o-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}div.v-pagination>ul>li{text-align:center;margin:0;display:inline}div.v-pagination>ul>li>a{margin:0 0 0 -1px;position:relative;border:1px solid #dee2e6;padding:6px 12px;line-height:1.43;box-shadow:none;background-color:#fff;font-size:14px;display:inline-block;text-decoration:none;color:#333;-webkit-transition:all .5s cubic-bezier(.175,.885,.32,1);-moz-transition:all .5s cubic-bezier(.175,.885,.32,1);-ms-transition:all .5s cubic-bezier(.175,.885,.32,1);-o-transition:all .5s cubic-bezier(.175,.885,.32,1);transition:all .5s cubic-bezier(.175,.885,.32,1)}div.v-pagination>ul>li>a:hover{z-index:2;-webkit-box-shadow:0 0 8px rgba(0,0,0,.2);-moz-box-shadow:0 0 8px rgba(0,0,0,.2);-ms-box-shadow:0 0 8px rgba(0,0,0,.2);-o-box-shadow:0 0 8px rgba(0,0,0,.2);box-shadow:0 0 8px rgba(0,0,0,.2)}div.v-pagination>ul>li.disabled>a,div.v-pagination>ul>li.v-pagination__info>a,div.v-pagination>ul>li.v-pagination__list>a{color:#999;cursor:default}div.v-pagination>ul>li.disabled>a:hover,div.v-pagination>ul>li.v-pagination__info>a:hover,div.v-pagination>ul>li.v-pagination__list>a:hover{color:#999;background-color:#fff;box-shadow:none;z-index:auto}div.v-pagination>ul>li.active>a{cursor:default;color:#999;background-color:#eee}div.v-pagination>ul>li.active>a:hover{box-shadow:none;z-index:auto}div.v-pagination>ul>li:first-child>a{border-left-width:1px;-webkit-border-bottom-left-radius:2px;-moz-border-bottom-left-radius:2px;-ms-border-bottom-left-radius:2px;-o-border-bottom-left-radius:2px;border-bottom-left-radius:2px;-webkit-border-top-left-radius:2px;-moz-border-top-left-radius:2px;-ms-border-top-left-radius:2px;-o-border-top-left-radius:2px;border-top-left-radius:2px}div.v-pagination>ul>li:last-child>a{-webkit-border-top-right-radius:2px;-moz-border-top-right-radius:2px;-ms-border-top-right-radius:2px;-o-border-top-right-radius:2px;border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-right-radius:2px;-ms-border-bottom-right-radius:2px;-o-border-bottom-right-radius:2px;border-bottom-right-radius:2px}div.v-pagination>ul>li.v-pagination__list select{margin-left:5px;width:auto!important;font-size:12px;padding:0;border:1px solid #ccc;color:#333;outline:0}div.v-pagination>ul>li.v-pagination__list select:hover{-webkit-box-shadow:0 0 2px rgba(0,0,0,.2);-moz-box-shadow:0 0 2px rgba(0,0,0,.2);-ms-box-shadow:0 0 2px rgba(0,0,0,.2);-o-box-shadow:0 0 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.2)}div.v-pagination>ul>li.v-pagination__list select[disabled]{color:#999}div.v-pagination.v-pagination--no-border>ul{box-shadow:none}div.v-pagination.v-pagination--no-border>ul>li:not(.active):not(.disabled):not(.v-pagination__info):not(.v-pagination__list) a:hover{box-shadow:none;z-index:auto;background-color:#ddd}div.v-pagination.v-pagination--no-border>ul>li.active a{background-color:#f6f6f6;color:#aaa}div.v-pagination.v-pagination--no-border>ul>li>a{border:0}div.v-pagination.v-pagination--no-border>ul>li>a:hover{z-index:auto}",""])},function(e,t){function i(e,t){var i=e[1]||"",n=e[3];if(!n)return i;if(t&&"function"==typeof btoa){var o=a(n);return[i].concat(n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"})).concat([o]).join("\n")}return[i].join("\n")}function a(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var a=i(t,e);return t[2]?"@media "+t[2]+"{"+a+"}":a}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var a={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(a[o]=!0)}for(n=0;n<e.length;n++){var r=e[n];"number"==typeof r[0]&&a[r[0]]||(i&&!r[2]?r[2]=i:i&&(r[2]="("+r[2]+") and ("+i+")"),t.push(r))}},t}},function(e,t,i){function a(e){for(var t=0;t<e.length;t++){var i=e[t],a=d[i.id];if(a){a.refs++;for(var n=0;n<a.parts.length;n++)a.parts[n](i.parts[n]);for(;n<i.parts.length;n++)a.parts.push(o(i.parts[n]));a.parts.length>i.parts.length&&(a.parts.length=i.parts.length)}else{for(var r=[],n=0;n<i.parts.length;n++)r.push(o(i.parts[n]));d[i.id]={id:i.id,refs:1,parts:r}}}}function n(){var e=document.createElement("style");return e.type="text/css",p.appendChild(e),e}function o(e){var t,i,a=document.querySelector("style["+b+'~="'+e.id+'"]');if(a){if(c)return h;a.parentNode.removeChild(a)}if(x){var o=f++;a=g||(g=n()),t=r.bind(null,a,o,!1),i=r.bind(null,a,o,!0)}else a=n(),t=s.bind(null,a),i=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else i()}}function r(e,t,i,a){var n=i?"":a.css;if(e.styleSheet)e.styleSheet.cssText=m(t,n);else{var o=document.createTextNode(n),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(o,r[t]):e.appendChild(o)}}function s(e,t){var i=t.css,a=t.media,n=t.sourceMap;if(a&&e.setAttribute("media",a),v.ssrId&&e.setAttribute(b,t.id),n&&(i+="\n/*# sourceURL="+n.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(6),d={},p=l&&(document.head||document.getElementsByTagName("head")[0]),g=null,f=0,c=!1,h=function(){},v=null,b="data-vue-ssr-id",x="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,i,n){c=i,v=n||{};var o=u(e,t);return a(o),function(t){for(var i=[],n=0;n<o.length;n++){var r=o[n],s=d[r.id];s.refs--,i.push(s)}t?(o=u(e,t),a(o)):o=[];for(var n=0;n<i.length;n++){var s=i[n];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete d[s.id]}}}};var m=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var i=[],a={},n=0;n<t.length;n++){var o=t[n],r=o[0],s=o[1],l=o[2],u=o[3],d={id:e+":"+n,css:s,media:l,sourceMap:u};a[r]?a[r].parts.push(d):i.push(a[r]={id:r,parts:[d]})}return i}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={cn:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页"},en:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# （total #totalRow# records）",first:"First",previous:"«",next:"»",last:"Last"},de:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# （gesamt #totalRow# Aufzeichnungen）",first:"Zuerst",previous:"«",next:"»",last:"Letzte"},jp:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ"}}}])});
 //# sourceMappingURL=v-page.js.map

package.json

 {
   "name": "v-page",
   "description": "A simple pagination bar, based on Vue2.x",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "author": "TerryZ <[e-mail]>",
@@ -10,3 +10,5 @@ "main": "dist/v-page.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "test:unit": "mocha-webpack --webpack-config webpack.config.js --require tests/unit/setup.js tests/unit/**/*.spec.js",
+    "cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit"
   },
@@ -25,5 +27,2 @@ "repository": {
   ],
-  "dependencies": {
-    "vue": "^2.6.10"
-  },
   "browserslist": [
@@ -35,16 +34,35 @@ "> 1%",
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
+    "chai": "^4.2.0",
+    "codecov": "^3.5.0",
     "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jsdom": "^15.1.1",
+    "jsdom-global": "^3.0.2",
+    "mocha": "^6.1.4",
+    "mocha-webpack": "^1.1.0",
     "node-sass": "^4.12.0",
+    "nyc": "^14.1.1",
     "sass-loader": "^6.0.7",
-    "vue-loader": "^13.0.5",
+    "vue": "^2.6.10",
+    "vue-loader": "^13.7.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.1.14",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "nyc": {
+    "include": [
+      "src/Page.js"
+    ],
+    "instrument": false,
+    "sourceMap": false
   }
 }

README.md

@@ -1,24 +0,11 @@
-<br><br>
+# [v-page](https://terryz.github.io/vue/#/page) &middot; [![circle ci](https://circleci.com/gh/TerryZ/v-page.svg?style=svg)](https://circleci.com/gh/TerryZ/v-page) [![code coverage](https://codecov.io/gh/TerryZ/v-page/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-page) [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm download](https://img.shields.io/npm/dy/v-page.svg)](https://www.npmjs.com/package/v-page) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-<h3 align="center">v-page</h3>
+A simple pagination bar, including length Menu, i18n support, based on <strong>Vue2</strong>
 
-<br><br>
+<img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
 
-<p align="center">
-  A simple pagination bar, including length Menu, i18n support, based on <strong>Vue2</strong>
-</p>
+## Examples and Documentation
 
-<p align="center"><img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px"></p>
+Live Examples on [CodePen](https://codepen.io/terry05/pen/yjZYLR), more exmaples and documentation please visit below sites
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/v-page"><img src="https://img.shields.io/npm/v/v-page.svg"></a>
-  <a href="https://mit-license.org/"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
-  <a href="https://www.npmjs.com/package/v-page"><img src="https://img.shields.io/npm/dy/v-page.svg"></a>
-</p>
-<br><br><br><br><br>
-
-
-## Demos and Documents
-Explorer on
-
 - [English site](https://terryz.github.io/vue/#/page)
@@ -29,63 +16,46 @@ - [国内站点](https://terryz.gitee.io/vue/#/page)
 
-<br><br>
+## Installation
 
-## Vue plugin series
+<a href="https://nodei.co/npm/v-page/"><img src="https://nodei.co/npm/v-page.png"></a>
 
-| Plugin | Status | Description |
-| :---------------- | :-- | :-- |
-| [v-page](https://github.com/TerryZ/v-page) | [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) | A simple pagination bar, including length Menu, i18n support |
-| [v-dialogs](https://github.com/TerryZ/v-dialogs) | [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs) | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes |
-| [v-tablegrid](https://github.com/TerryZ/v-tablegrid) | [![npm version](https://img.shields.io/npm/v/v-tablegrid.svg)](https://www.npmjs.com/package/v-tablegrid) | A simpler to use and practical datatable |
-| [v-uploader](https://github.com/TerryZ/v-uploader) | [![npm version](https://img.shields.io/npm/v/v-uploader.svg)](https://www.npmjs.com/package/v-uploader) | A Vue2 plugin to make files upload simple and easier, <br>you can drag files or select file in dialog to upload |
-| [v-ztree](https://github.com/TerryZ/v-ztree) | [![npm version](https://img.shields.io/npm/v/v-ztree.svg)](https://www.npmjs.com/package/v-ztree) | A simple tree for Vue2, support single or multiple(check) select tree, <br>and support server side data |
-| [v-gallery](https://github.com/TerryZ/v-gallery) | [![npm version](https://img.shields.io/npm/v/v-gallery.svg)](https://www.npmjs.com/package/v-gallery) | A Vue2 plugin make browsing images in gallery |
-| [v-region](https://github.com/TerryZ/v-region) | [![npm version](https://img.shields.io/npm/v/v-region.svg)](https://www.npmjs.com/package/v-region) | A simple region selector, provide Chinese administrative division data |
-| [v-selectpage](https://github.com/TerryZ/v-selectpage) | [![npm version](https://img.shields.io/npm/v/v-selectpage.svg)](https://www.npmjs.com/package/v-selectpage) | A powerful selector for Vue2, list or table view of pagination, <br>use tags for multiple selection, i18n and server side resources supports |
-| [v-suggest](https://github.com/TerryZ/v-suggest) | [![npm version](https://img.shields.io/npm/v/v-suggest.svg)](https://www.npmjs.com/package/v-suggest) | A Vue2 plugin for input suggestions by autocomplete |
-| [v-playback](https://github.com/TerryZ/v-playback) | [![npm version](https://img.shields.io/npm/v/v-playback.svg)](https://www.npmjs.com/package/v-playback) | A Vue2 plugin to make video play easier |
-| [v-selectmenu](https://github.com/TerryZ/v-selectmenu) | [![npm version](https://img.shields.io/npm/v/v-selectmenu.svg)](https://www.npmjs.com/package/v-selectmenu) | A simple, easier and highly customized menu solution |
-
-<br><br>
-
-## Install
-
-``` bash
-npm i v-page --save
 ```
+npm i -S v-page
+```
 
-Include plugin in your `main.js` file.
+Include and install plugin in your `main.js` file.
 
 ```js
-//add component in global scope as plugin
+// add component in global scope as plugin
 import Vue from 'vue'
-import vPage from 'v-page';
-Vue.use(vPage, { global config options });
+import Page from 'v-page'
+Vue.use(Page, {
+  global config options
+})
 ```
 
-you also can use `v-page` in local component
+You also can use `v-page` in local component
 
 ```vue
 <template>
-    <div>
-        <v-page></v-page>
-    </div>
+  <v-page></v-page>
 </template>
 
 <script>
-import { vPage } from 'v-page';
+import { vPage } from 'v-page'
 export default {
-    components: {
-        'v-page': vPage
-    }
+  components: {
+    'v-page': vPage
+  }
 }
 </script>
-
 ```
 
+## Usage
 
-## Deploy on your component
-
 ```vue
 <template>
-  <v-page :total-row="totalRow" @page-change="pageChange"></v-page>
+  <v-page
+    :total-row="totalRow"
+    @page-change="pageChange"
+  ></v-page>
 </template>
@@ -95,16 +65,31 @@
 export default {
-  name: 'myComponent',
-  data(){
+  data () {
     return {
-      totalRow: 100//required option
+      totalRow: 100 // required option
     }
   },
-  methods:{
-    //receive page info change callback
-    pageChange(pInfo){
-      console.log(pInfo);//{pageNumber: 1, pageSize: 10}
+  methods: {
+    // receive page info change callback
+    pageChange (pInfo) {
+      console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
     }
   }
-};
+}
 </script>
 ```
+
+## Vue plugin series
+
+| Plugin | Status | Description |
+| :---------------- | :-- | :-- |
+| [v-page](https://github.com/TerryZ/v-page) | [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) | A simple pagination bar, including length Menu, i18n support |
+| [v-dialogs](https://github.com/TerryZ/v-dialogs) | [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs) | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes |
+| [v-tablegrid](https://github.com/TerryZ/v-tablegrid) | [![npm version](https://img.shields.io/npm/v/v-tablegrid.svg)](https://www.npmjs.com/package/v-tablegrid) | A simpler to use and practical datatable |
+| [v-uploader](https://github.com/TerryZ/v-uploader) | [![npm version](https://img.shields.io/npm/v/v-uploader.svg)](https://www.npmjs.com/package/v-uploader) | A Vue2 plugin to make files upload simple and easier, <br>you can drag files or select file in dialog to upload |
+| [v-ztree](https://github.com/TerryZ/v-ztree) | [![npm version](https://img.shields.io/npm/v/v-ztree.svg)](https://www.npmjs.com/package/v-ztree) | A simple tree for Vue2, support single or multiple(check) select tree, <br>and support server side data |
+| [v-gallery](https://github.com/TerryZ/v-gallery) | [![npm version](https://img.shields.io/npm/v/v-gallery.svg)](https://www.npmjs.com/package/v-gallery) | A Vue2 plugin make browsing images in gallery |
+| [v-region](https://github.com/TerryZ/v-region) | [![npm version](https://img.shields.io/npm/v/v-region.svg)](https://www.npmjs.com/package/v-region) | A simple region selector, provide Chinese administrative division data |
+| [v-selectpage](https://github.com/TerryZ/v-selectpage) | [![npm version](https://img.shields.io/npm/v/v-selectpage.svg)](https://www.npmjs.com/package/v-selectpage) | A powerful selector for Vue2, list or table view of pagination, <br>use tags for multiple selection, i18n and server side resources supports |
+| [v-suggest](https://github.com/TerryZ/v-suggest) | [![npm version](https://img.shields.io/npm/v/v-suggest.svg)](https://www.npmjs.com/package/v-suggest) | A Vue2 plugin for input suggestions by autocomplete |
+| [v-playback](https://github.com/TerryZ/v-playback) | [![npm version](https://img.shields.io/npm/v/v-playback.svg)](https://www.npmjs.com/package/v-playback) | A Vue2 plugin to make video play easier |
+| [v-selectmenu](https://github.com/TerryZ/v-selectmenu) | [![npm version](https://img.shields.io/npm/v/v-selectmenu.svg)](https://www.npmjs.com/package/v-selectmenu) | A simple, easier and highly customized menu solution |

src/index.js

@@ -1,21 +0,32 @@
-import vPage from './Page';
+import Page from './Page'
 
 const Plugin = {
-    install(Vue, options = {}){
-        if(Object.keys(options).length){
-            if(options.language) vPage.props.language.default = options.language;
-            if(options.align) vPage.props.align.default = options.align;
-            if(typeof options.info === 'boolean') vPage.props.info.default = options.info;
-            if(typeof options.border === 'boolean') vPage.props.border.default = options.border;
-            if(typeof options.pageNumber === 'boolean') vPage.props.pageNumber.default = options.pageNumber;
-            if(typeof options.first === 'boolean') vPage.props.first.default = options.first;
-            if(typeof options.last === 'boolean') vPage.props.last.default = options.last;
-            if(typeof options.pageSizeMenu !== 'undefined')
-                vPage.props.pageSizeMenu.default = options.pageSizeMenu;
-        }
-        Vue.component(vPage.name, vPage);
+  install (Vue, options = {}) {
+    if (Object.keys(options).length) {
+      const props = Page.props
+      const {
+        language,
+        align,
+        info,
+        border,
+        pageNumber,
+        first,
+        last,
+        pageSizeMenu
+      } = options
+
+      if (language) props.language.default = language
+      if (align) props.align.default = align
+      if (typeof info === 'boolean') props.info.default = info
+      if (typeof border === 'boolean') props.border.default = border
+      if (typeof pageNumber === 'boolean') props.pageNumber.default = pageNumber
+      if (typeof first === 'boolean') props.first.default = first
+      if (typeof last === 'boolean') props.last.default = last
+      if (typeof pageSizeMenu !== 'undefined') props.pageSizeMenu.default = pageSizeMenu
     }
-};
+    Vue.component(Page.name, Page)
+  }
+}
 
-export {vPage};
-export default Plugin;
+export { Page }
+export default Plugin

src/language.js

@@ -1,28 +0,34 @@
-const languages = {
-    cn: {
-        pageLength: '每页记录数 ',
-        pageInfo: `当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）`,
-        first: '首页',
-        previous: '«',
-        next: '»',
-        last: '尾页'
-    },
-    en: {
-        pageLength: 'Page length ',
-        pageInfo: 'Current #pageNumber# / #totalPage# （total #totalRow# records）',
-        first: 'First',
-        previous: '«',
-        next: '»',
-        last: 'Last'
-    },
-    jp: {
-        pageLength: 'ページごとの記録数',
-        pageInfo: '現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）',
-        first: 'トップページ',
-        previous: '«',
-        next: '»',
-        last: '尾のページ'
-    }
-};
-
-export default languages;
+export default {
+  cn: {
+    pageLength: '每页记录数 ',
+    pageInfo: '当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）',
+    first: '首页',
+    previous: '«',
+    next: '»',
+    last: '尾页'
+  },
+  en: {
+    pageLength: 'Page length ',
+    pageInfo: 'Current #pageNumber# / #totalPage# （total #totalRow# records）',
+    first: 'First',
+    previous: '«',
+    next: '»',
+    last: 'Last'
+  },
+  de: {
+    pageLength: 'Seitenlänge ',
+    pageInfo: 'Aktuell #pageNumber# / #totalPage# （gesamt #totalRow# Aufzeichnungen）',
+    first: 'Zuerst',
+    previous: '«',
+    next: '»',
+    last: 'Letzte'
+  },
+  jp: {
+    pageLength: 'ページごとの記録数',
+    pageInfo: '現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）',
+    first: 'トップページ',
+    previous: '«',
+    next: '»',
+    last: '尾のページ'
+  }
+}

src/Page.js

@@ -1,232 +0,214 @@
-import './page.scss';
-import languages from './language';
+import './page.sass'
+import languages from './language'
 
-const FIRST = 1;
+const FIRST = 1
 
 export default {
-	name: "v-page",
-	props: {
-		value: {
-			type: Number,
-			default: 0
-		},
-		totalRow: {
-			type: Number,
-			default: 0
-		},
-		/**
-		 * page size list
-		 * false: close page size menu bar
-		 * array: custom page sizes menu
-		 */
-		pageSizeMenu: {
-			type: [Boolean, Array],
-			default: function () {
-				return [10, 20, 50, 100];
-			}
-		},
-		language: {
-			type: String,
-			default: 'cn'
-		},
-		/**
-		 * pagination alignment direction
-		 * 'left'
-		 * 'center'
-		 * 'right'(default)
-		 */
-		align: {
-			type: String,
-			default: 'right'
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		border: {
-			type: Boolean,
-			default: true
-		},
-		info: {
-			type: Boolean,
-			default: true
-		},
-		pageNumber: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * first page button
-		 */
-		first: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * last page button
-		 */
-		last: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			pageSize: this.pageSizeMenu === false ? 10 : this.pageSizeMenu[0],
-			lastPageSize: -1,
-			currentPage: 0,
-			pageNumberSize: 5,
-			i18n: languages[this.language] || languages['cn']
-		};
-	},
-	computed: {
-		totalPage(){
-			return Math.ceil(this.totalRow / this.pageSize);
-		},
-		pageNumbers() {
-			let start = 1, end, half = Math.floor(this.pageNumberSize / 2);
-			if (this.totalPage < this.pageNumberSize) end = this.totalPage;
-			else if (this.currentPage <= half) end = this.pageNumberSize;
-			else if (this.currentPage >= (this.totalPage - half)) {
-				start = this.totalPage - this.pageNumberSize + 1;
-				end = this.totalPage;
-			} else {
-				start = this.currentPage - half;
-				end = start + this.pageNumberSize - 1;
-			}
+  name: 'v-page',
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    totalRow: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * page size list
+     * false: close page size menu bar
+     * array: custom page sizes menu
+     */
+    pageSizeMenu: {
+      type: [Boolean, Array],
+      default: function () {
+        return [10, 20, 50, 100]
+      }
+    },
+    language: {
+      type: String,
+      default: 'cn'
+    },
+    /**
+     * pagination alignment direction
+     * 'left'
+     * 'center'
+     * 'right'(default)
+     */
+    align: {
+      type: String,
+      default: 'right'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    info: {
+      type: Boolean,
+      default: true
+    },
+    pageNumber: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * first page button
+     */
+    first: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * last page button
+     */
+    last: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      pageSize: this.pageSizeMenu === false ? 10 : this.pageSizeMenu[0],
+      lastPageSize: -1,
+      current: 0,
+      pageNumberSize: 5,
+      i18n: languages[this.language] || languages.cn
+    }
+  },
+  computed: {
+    totalPage () {
+      return Math.ceil(this.totalRow / this.pageSize)
+    },
+    pageNumbers () {
+      const { current, pageNumberSize, totalPage } = this
+      const half = Math.floor(pageNumberSize / 2)
+      const start = current - half
+      return Array.apply(null, { length: pageNumberSize })
+        .map((val, index) => start + index)
+        .filter(val => val > 0 && val <= totalPage)
+    },
+    pageInfo () {
+      return this.i18n.pageInfo
+        .replace('#pageNumber#', this.current)
+        .replace('#totalPage#', this.totalPage)
+        .replace('#totalRow#', this.totalRow)
+    },
+    classes () {
+      return {
+        'v-pagination--no-border': !this.border,
+        'v-pagination--right': this.align === 'right',
+        'v-pagination--center': this.align === 'center',
+        'v-pagination--disabled': this.disabled
+      }
+    },
+    isFirst () {
+      return this.current === FIRST
+    },
+    isLast () {
+      return this.current === this.totalPage
+    }
+  },
+  watch: {
+    value (val) {
+      if (typeof val === 'number' && val > 0) this.goPage(val, false)
+    }
+  },
+  render (h) {
+    const items = []
+    // page length list
+    if (Array.isArray(this.pageSizeMenu) && this.pageSizeMenu.length) {
+      items.push(h('li', { class: 'v-pagination__list' }, [h('a', [
+        h('span', this.i18n.pageLength),
+        h('select', {
+          attrs: { disabled: this.disabled },
+          on: {
+            change: e => {
+              if (e.srcElement && e.srcElement.value) {
+                this.pageSize = Number(e.srcElement.value)
+              }
+              this.goPage()
+            }
+          }
+        }, this.pageSizeMenu.map(val => {
+          return h('option', { attrs: { value: val } }, val)
+        }))
+      ])]))
+    }
+    // page info
+    if (this.info) {
+      items.push(h('li', { class: 'v-pagination__info' }, [h('a', this.pageInfo)]))
+    }
+    /**
+     * page number generator
+     * @param classes
+     * @param num
+     * @param text
+     * @return VNode
+     */
+    const genItem = (classes, num, text) => {
+      return h('li', { class: classes }, [
+        h('a', {
+          attrs: { href: 'javascript:void(0)' },
+          on: { click: () => this.goPage(num) }
+        }, text)
+      ])
+    }
+    // first
+    if (this.first) {
+      items.push(genItem({ disabled: this.isFirst }, FIRST, this.i18n.first))
+    }
+    // previous
+    items.push(genItem({ disabled: this.isFirst }, this.current - 1, this.i18n.previous))
+    // page numbers
+    if (this.pageNumber) {
+      items.push(...this.pageNumbers.map(val => genItem({
+        active: val === this.current
+      }, val, val)))
+    }
+    // next
+    items.push(genItem({ disabled: this.isLast }, this.current + 1, this.i18n.next))
+    // last
+    if (this.last) {
+      items.push(genItem({ disabled: this.isLast }, this.totalPage, this.i18n.last))
+    }
+    return h('div', {
+      class: {
+        'v-pagination': true,
+        ...this.classes
+      }
+    }, [h('ul', items)])
+  },
+  methods: {
+    goPage (pNum = FIRST, respond = true) {
+      if (this.disabled) return
+      if (typeof pNum !== 'number') return
+      let num = pNum < FIRST ? FIRST : pNum
+      if (pNum > this.totalPage && this.totalPage > 0) num = this.totalPage
 
-			return Array.apply(null, {length:end-start+1}).map((val,index)=>start+index);
-		},
-		pageInfo() {
-			return this.i18n.pageInfo.replace('#pageNumber#', this.currentPage)
-				.replace('#totalPage#', this.totalPage)
-				.replace('#totalRow#', this.totalRow);
-		},
-		classes(){
-			return {
-				'v-pagination--no-border': !this.border,
-				'v-pagination--right': this.align === 'right',
-				'v-pagination--center': this.align === 'center',
-				'v-pagination--disabled': this.disabled
-			};
-		},
-		isFirst(){
-			return this.currentPage === FIRST;
-		},
-		isLast(){
-			return this.currentPage === this.totalPage;
-		}
-	},
-	watch: {
-		value(val){
-			if(typeof val === 'number' && val > 0) this.goPage(val, false);
-		}
-	},
-	render(h){
-		const items = [];
-		//page length list
-		if(Array.isArray(this.pageSizeMenu) && this.pageSizeMenu.length){
-			items.push(h('li',{class:'v-pagination__list'},[h('a',[
-				h('span',this.i18n.pageLength),
-				h('select',{
-					attrs:{disabled: this.disabled},
-					on:{
-						change: e => {
-							if(e.srcElement && e.srcElement.value){
-								this.pageSize = Number(e.srcElement.value);
-							}
-							this.goPage();
-						}
-					}
-				},this.pageSizeMenu.map(val=>{
-					return h('option',{attrs:{value:val}},val);
-				}))
-			])]));
-		}
-		//page info
-		if(this.info){
-			items.push(h('li',{class:'v-pagination__info'},[h('a', this.pageInfo)]));
-		}
-		/**
-		 * page number generator
-		 * @param classes
-		 * @param num
-		 * @param text
-		 * @return VNode
-		 */
-		const genItem = (classes, num, text) => {
-			return h('li',{class:classes},[
-				h('a',{
-					attrs:{href:'javascript:void(0);'},
-					on:{click:()=>this.switchPage(num)}
-				}, text)
-			]);
-		};
-		//first
-		if(this.first){
-			items.push(genItem({disabled:this.isFirst}, 'first', this.i18n.first));
-		}
-		//previous
-		items.push(genItem({disabled:this.isFirst}, 'previous', this.i18n.previous));
-		//page numbers
-		if(this.pageNumber){
-			this.pageNumbers.forEach(val => {
-				items.push(genItem({active:val === this.currentPage}, val, val));
-			});
-		}
-		//next
-		items.push(genItem({disabled:this.isLast}, 'next', this.i18n.next));
-		//last
-		if(this.last){
-			items.push(genItem({disabled:this.isLast}, 'last', this.i18n.last));
-		}
-		return h('div',{
-			class:{
-				'v-pagination': true,
-				...this.classes
-			}
-		},[h('ul', items)]);
-	},
-	methods: {
-		goPage(pNum = FIRST, respond = true) {
-			if(typeof pNum !== 'number') return;
-			let num = pNum < FIRST ? FIRST : pNum;
-			if(pNum > this.totalPage && this.totalPage > 0) num = this.totalPage;
+      // exit when duplicate operation
+      if (num === this.current && this.pageSize === this.lastPageSize) return
 
-			//exit when duplicate operation
-			if(num === this.currentPage && this.pageSize === this.lastPageSize) return;
-
-			this.currentPage = num;
-			// update v-model value
-			if(respond) this.$emit('input', this.currentPage);
-			this.lastPageSize = this.pageSize;
-			this.change();
-		},
-		reload(){
-			this.change();
-		},
-		change(){
-			this.$emit('page-change', {
-				pageNumber: this.currentPage,
-				pageSize: Number(this.pageSize)
-			});
-		},
-		position(target){
-			if (typeof target === 'string') {
-				switch (target) {
-					case 'first': return FIRST;
-					case 'previous': return this.currentPage - 1;
-					case 'next': return this.currentPage + 1;
-					case 'last': return this.totalPage;
-				}
-			} else if (typeof target === 'number') return target;
-		},
-		switchPage(target) {
-			if (this.disabled) return;
-			this.goPage(this.position(target));
-		}
-	},
-	mounted() {
-		this.goPage(this.value ? this.value : FIRST);
-	}
-}
+      this.current = num
+      // update v-model value
+      if (respond) this.$emit('input', this.current)
+      this.lastPageSize = this.pageSize
+      this.change()
+    },
+    reload () {
+      this.change()
+    },
+    change () {
+      this.$emit('page-change', {
+        pageNumber: this.current,
+        pageSize: Number(this.pageSize)
+      })
+    }
+  },
+  mounted () {
+    this.goPage(this.value ? this.value : FIRST)
+  }
+}

webpack.config.js

 var path = require('path')
 var webpack = require('webpack')
-
+var isCoverage = process.env.NODE_ENV === 'coverage';
 module.exports = {
-  //entry: './src/main.js',
   entry: './src/index.js',
@@ -10,10 +9,14 @@ output: {
     publicPath: '/dist/',
-    //filename: 'build.js'
-	filename: 'v-page.js',
-	library: 'vPage',
-	libraryTarget: 'umd',
-	umdNamedDefine: true
+    filename: 'v-page.js',
+    library: 'vPage',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
   },
   module: {
     rules: [
+      isCoverage ? {
+          test: /\.(js|ts)/,
+          include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
+          loader: 'istanbul-instrumenter-loader'
+      } : {},
       {
@@ -80,3 +83,5 @@ test: /\.css$/,
     alias: {
-      'vue$': 'vue/dist/vue.esm.js'
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': path.resolve(__dirname, 'src/'),
+      '@test': path.resolve(__dirname, 'tests/')
     },
@@ -93,3 +98,3 @@ extensions: ['*', '.js', '.vue', '.json']
   },
-  devtool: '#eval-source-map'
+  devtool: isCoverage?'inline-cheap-module-source-map':'#eval-source-map'
 }
@@ -96,0 +101,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102631

increased by2.28%

Dependency count

0

decreased by-100%

Number of package files

15

increased by25%

Lines of code

491

increased by13.66%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

25

increased by92.31%

Number of lines in readme file

94

decreased by-13.76%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• - Removedvue@^2.6.10

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.1(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.4.47(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedvue@2.7.16(transitive)