Comparing version 2.0.8 to 2.0.9
@@ -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 |
{ | ||
"name": "v-page", | ||
"description": "A simple pagination bar, based on Vue2.x", | ||
"version": "2.0.8", | ||
"version": "2.0.9", | ||
"author": "TerryZ <terry5@foxmail.com>", | ||
@@ -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 | ||
} | ||
} |
113
README.md
@@ -1,24 +0,11 @@ | ||
<br><br> | ||
# [v-page](https://terryz.github.io/vue/#/page) · [![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 | |
@@ -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 |
@@ -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: '尾のページ' | ||
} | ||
} |
436
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) | ||
} | ||
} |
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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskPackage 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
102631
0
15
491
0
25
94
2
- 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)