v-page 2.0.9 → 3.0.0-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # [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)
 
-A simple pagination bar, including length Menu, i18n support, based on <strong>Vue2</strong>
+A simple pagination bar, including size Menu, i18n support, based on **Vue2**
 
 <img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
 
@@ -17,7 +17,7 @@ The jQuery version: [bPage](https://github.com/TerryZ/bPage)
 
 <a href="https://nodei.co/npm/v-page/"><img src="https://nodei.co/npm/v-page.png"></a>
 
-```
+```sh
 npm i -S v-page
 ```
 
@@ -40,10 +40,10 @@ You also can use `v-page` in local component
 </template>
 
 <script>
-import { vPage } from 'v-page'
+import { Page } from 'v-page'
 export default {
   components: {
-    'v-page': vPage
+    'v-page': Page
   }
 }
 </script>
@@ -75,19 +75,3 @@ export default {
 }
 </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 |

package/dist/v-page.js

@@ -1,2 +1,217 @@
-!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
+(function(){"use strict";try{var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:2px}.v-pagination ul li select:hover[disabled]{color:#999}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as F, toRefs as j, ref as P, computed as c, watch as k, onMounted as O, h as u } from "vue";
+const [
+  z,
+  T,
+  D,
+  G,
+  Z
+] = ["cn", "en", "de", "jp", "pt"], I = {
+  [z]: {
+    pageLength: "\u6BCF\u9875\u8BB0\u5F55\u6570 ",
+    pageInfo: "\u5F53\u524D\u663E\u793A\u7B2C #pageNumber# / #totalPage# \u9875\uFF08\u5171#totalRow#\u6761\u8BB0\u5F55\uFF09",
+    first: "\u9996\u9875",
+    previous: "\xAB",
+    next: "\xBB",
+    last: "\u5C3E\u9875",
+    all: "\u5168\u90E8"
+  },
+  [T]: {
+    pageLength: "Page length ",
+    pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)",
+    first: "First",
+    previous: "\xAB",
+    next: "\xBB",
+    last: "Last",
+    all: "All"
+  },
+  [D]: {
+    pageLength: "Seitenl\xE4nge ",
+    pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",
+    first: "Zuerst",
+    previous: "\xAB",
+    next: "\xBB",
+    last: "Letzte",
+    all: "Alle"
+  },
+  [G]: {
+    pageLength: "\u30DA\u30FC\u30B8\u3054\u3068\u306E\u8A18\u9332\u6570",
+    pageInfo: "\u73FE\u5728\u306E\u7B2C #pageNumber# / #totalPage# \u30DA\u30FC\u30B8\uFF08\u5168\u90E8\u3067 #totalRow# \u6761\u306E\u8A18\u9332\uFF09",
+    first: "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8",
+    previous: "\xAB",
+    next: "\xBB",
+    last: "\u5C3E\u306E\u30DA\u30FC\u30B8",
+    all: "\u3059\u3079\u3066"
+  },
+  [Z]: {
+    pageLength: "Resultados por p\xE1gina ",
+    pageInfo: "#pageNumber# / #totalPage# (total de #totalRow#)",
+    first: "In\xEDcio",
+    previous: "<",
+    next: ">",
+    last: "Fim",
+    all: "Todos"
+  }
+}, r = 1, J = 5, B = 10, q = [B, 20, 50, 100], x = 0;
+function H(e, s, t) {
+  if (s <= t)
+    return r;
+  const v = Math.floor(t / 2), n = s - t + 1, o = e - v;
+  return o < r ? r : o > n ? n : o;
+}
+function K(e, s, t) {
+  const v = H(e, s, t);
+  return Array.from({ length: t }).map((n, o) => v + o).filter((n) => n >= r && n <= s);
+}
+const R = F({
+  name: "VPage",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    totalRow: { type: Number, default: 0 },
+    language: { type: String, default: z },
+    pageSizeMenu: {
+      type: [Boolean, Array],
+      default: () => q
+    },
+    align: { type: String, default: "right" },
+    disabled: { type: Boolean, default: !1 },
+    border: { type: Boolean, default: !1 },
+    info: { type: Boolean, default: !0 },
+    pageNumber: { type: Boolean, default: !0 },
+    first: { type: Boolean, default: !0 },
+    last: { type: Boolean, default: !0 },
+    displayAll: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: s, slots: t, expose: v }) {
+    const { pageSizeMenu: n, totalRow: o } = j(e), l = P(0), f = P(
+      n.value === !1 ? B : n.value[0]
+    ), N = P(J), g = P(I[e.language] || I[z]), b = P(-1), p = c(() => f.value === x ? r : Math.ceil(o.value / f.value)), C = c(() => K(
+      l.value,
+      p.value,
+      N.value
+    )), M = c(() => g.value.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", p.value).replace("#totalRow#", o.value)), V = c(() => ({
+      "v-pagination": !0,
+      "v-pagination--border": e.border,
+      "v-pagination--right": e.align === "right",
+      "v-pagination--center": e.align === "center",
+      "v-pagination--disabled": e.disabled
+    })), A = c(() => l.value === r), L = c(() => l.value === p.value);
+    k(
+      () => e.modelValue,
+      (a) => {
+        typeof a == "number" && a > 0 && m(a, !1);
+      }
+    );
+    function m(a = r, y = !0) {
+      if (e.disabled || typeof a != "number")
+        return;
+      let d = a < r ? r : a;
+      a > p.value && p.value > 0 && (d = p.value), !(d === l.value && f.value === b.value) && (l.value = d, y && s("update:modelValue", l.value), b.value = f.value, w());
+    }
+    function w() {
+      s("change", {
+        pageNumber: l.value,
+        pageSize: Number(f.value)
+      });
+    }
+    function h(a, y, d) {
+      return u("li", { class: a }, [u("a", {
+        href: "javascript:void(0)",
+        onClick: () => m(y)
+      }, d)]);
+    }
+    return O(() => {
+      m(e.modelValue || r);
+    }), v({
+      current: l,
+      totalPage: p,
+      pageNumbers: C,
+      goPage: m,
+      reload: w
+    }), () => {
+      const a = [];
+      if (Array.isArray(n.value) && n.value.length) {
+        const i = {
+          disabled: e.disabled,
+          onChange: (S) => {
+            f.value = Number(S.target.value), m();
+          }
+        }, _ = n.value.map(
+          (S) => u("option", { value: S }, S)
+        );
+        e.displayAll && _.push(
+          u("option", { value: x }, g.value.all)
+        );
+        const E = u("li", { class: "v-pagination__list" }, [
+          u("a", [
+            u("span", g.value.pageLength),
+            u("select", i, _)
+          ])
+        ]);
+        a.push(E);
+      }
+      if (e.info && a.push(
+        u("li", { class: "v-pagination__info" }, [u("a", M.value)])
+      ), "default" in t) {
+        const i = u("li", { class: "v-pagination__slot" }, [
+          u(
+            "a",
+            t.default({
+              pageNumber: l.value,
+              pageSize: f.value,
+              totalPage: p.value,
+              totalRow: o.value,
+              isFirst: A.value,
+              isLast: L.value
+            })
+          )
+        ]);
+        a.push(i);
+      }
+      if (e.first) {
+        const i = ["v-pagination__first", { disabled: A.value }];
+        a.push(h(i, r, g.value.first));
+      }
+      const y = ["v-pagination__previous", { disabled: A.value }];
+      a.push(
+        h(y, l.value - 1, g.value.previous)
+      ), e.pageNumber && a.push(
+        ...C.value.map((i) => {
+          const _ = { active: i === l.value };
+          return h(_, i, i);
+        })
+      );
+      const d = ["v-pagination__next", { disabled: L.value }];
+      if (a.push(
+        h(d, l.value + 1, g.value.next)
+      ), e.last) {
+        const i = ["v-pagination__last", { disabled: L.value }];
+        a.push(
+          h(i, p.value, g.value.last)
+        );
+      }
+      return u("div", { class: V.value }, [u("ul", a)]);
+    };
+  }
+});
+R.install = (e, s = {}) => {
+  if (Object.keys(s).length) {
+    const { props: t } = R, {
+      language: v,
+      align: n,
+      info: o,
+      border: l,
+      pageNumber: f,
+      first: N,
+      last: g,
+      pageSizeMenu: b
+    } = s;
+    v && (t.language.default = v), n && (t.align.default = n), typeof o == "boolean" && (t.info.default = o), typeof l == "boolean" && (t.border.default = l), typeof f == "boolean" && (t.pageNumber.default = f), typeof N == "boolean" && (t.first.default = N), typeof g == "boolean" && (t.last.default = g), typeof b < "u" && (t.pageSizeMenu.default = b);
+  }
+  e.component(R.name, R);
+};
+export {
+  R as Page,
+  R as default
+};

package/dist/v-page.umd.cjs

@@ -0,0 +1,2 @@
+(function(){"use strict";try{var i=document.createElement("style");i.appendChild(document.createTextNode(".v-pagination{display:flex;justify-content:flex-start;box-sizing:border-box}.v-pagination--right{justify-content:flex-end}.v-pagination--center{justify-content:center}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li a{padding:.3rem .6rem;text-decoration:none;line-height:1.3;font-size:14px;margin:0;outline:0;color:#333;border-radius:.25rem}.v-pagination ul li:not(.active):not(.disabled):not(.v-pagination__list):not(.v-pagination__info):not(.v-pagination__slot) a:hover{background-color:#fafafa}.v-pagination ul li.active a{background-color:#eee;color:#aaa}.v-pagination ul li.disabled a{color:#999;cursor:default}.v-pagination ul li select{width:auto!important;font-size:12px;padding:0;outline:0;margin:0 0 0 5px;border:1px solid #ccc;color:#333;border-radius:2px}.v-pagination ul li select:hover[disabled]{color:#999}.v-pagination.v-pagination--border ul{box-shadow:0 1px 2px #0000000d;border-radius:.25rem}.v-pagination.v-pagination--border ul li:not(:first-child) a{margin-left:-1px}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.v-pagination.v-pagination--border ul li.active a{color:#999;background-color:#eee}")),document.head.appendChild(i)}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VPage={},p.Vue))})(this,function(p,e){"use strict";const Z="",[R,x,B,V,T]=["cn","en","de","jp","pt"],z={[R]:{pageLength:"\u6BCF\u9875\u8BB0\u5F55\u6570 ",pageInfo:"\u5F53\u524D\u663E\u793A\u7B2C #pageNumber# / #totalPage# \u9875\uFF08\u5171#totalRow#\u6761\u8BB0\u5F55\uFF09",first:"\u9996\u9875",previous:"\xAB",next:"\xBB",last:"\u5C3E\u9875",all:"\u5168\u90E8"},[x]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"\xAB",next:"\xBB",last:"Last",all:"All"},[B]:{pageLength:"Seitenl\xE4nge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"\xAB",next:"\xBB",last:"Letzte",all:"Alle"},[V]:{pageLength:"\u30DA\u30FC\u30B8\u3054\u3068\u306E\u8A18\u9332\u6570",pageInfo:"\u73FE\u5728\u306E\u7B2C #pageNumber# / #totalPage# \u30DA\u30FC\u30B8\uFF08\u5168\u90E8\u3067 #totalRow# \u6761\u306E\u8A18\u9332\uFF09",first:"\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8",previous:"\xAB",next:"\xBB",last:"\u5C3E\u306E\u30DA\u30FC\u30B8",all:"\u3059\u3079\u3066"},[T]:{pageLength:"Resultados por p\xE1gina ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"In\xEDcio",previous:"<",next:">",last:"Fim",all:"Todos"}},s=1,j=5,C=10,E=[C,20,50,100],w=0;function F(a,r,l){if(r<=l)return s;const c=Math.floor(l/2),o=r-l+1,i=a-c;return i<s?s:i>o?o:i}function O(a,r,l){const c=F(a,r,l);return Array.from({length:l}).map((o,i)=>c+i).filter(o=>o>=s&&o<=r)}const h=e.defineComponent({name:"VPage",props:{modelValue:{type:Number,default:0},totalRow:{type:Number,default:0},language:{type:String,default:R},pageSizeMenu:{type:[Boolean,Array],default:()=>E},align:{type:String,default:"right"},disabled:{type:Boolean,default:!1},border:{type:Boolean,default:!1},info:{type:Boolean,default:!0},pageNumber:{type:Boolean,default:!0},first:{type:Boolean,default:!0},last:{type:Boolean,default:!0},displayAll:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(a,{emit:r,slots:l,expose:c}){const{pageSizeMenu:o,totalRow:i}=e.toRefs(a),n=e.ref(0),f=e.ref(o.value===!1?C:o.value[0]),_=e.ref(j),g=e.ref(z[a.language]||z[R]),b=e.ref(-1),d=e.computed(()=>f.value===w?s:Math.ceil(i.value/f.value)),I=e.computed(()=>O(n.value,d.value,_.value)),k=e.computed(()=>g.value.pageInfo.replace("#pageNumber#",n.value).replace("#totalPage#",d.value).replace("#totalRow#",i.value)),D=e.computed(()=>({"v-pagination":!0,"v-pagination--border":a.border,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled})),A=e.computed(()=>n.value===s),L=e.computed(()=>n.value===d.value);e.watch(()=>a.modelValue,t=>{typeof t=="number"&&t>0&&m(t,!1)});function m(t=s,P=!0){if(a.disabled||typeof t!="number")return;let v=t<s?s:t;t>d.value&&d.value>0&&(v=d.value),!(v===n.value&&f.value===b.value)&&(n.value=v,P&&r("update:modelValue",n.value),b.value=f.value,M())}function M(){r("change",{pageNumber:n.value,pageSize:Number(f.value)})}function y(t,P,v){const u={href:"javascript:void(0)",onClick:()=>m(P)};return e.h("li",{class:t},[e.h("a",u,v)])}return e.onMounted(()=>{m(a.modelValue||s)}),c({current:n,totalPage:d,pageNumbers:I,goPage:m,reload:M}),()=>{const t=[];if(Array.isArray(o.value)&&o.value.length){const u={disabled:a.disabled,onChange:S=>{f.value=Number(S.target.value),m()}},N=o.value.map(S=>e.h("option",{value:S},S));a.displayAll&&N.push(e.h("option",{value:w},g.value.all));const G=e.h("li",{class:"v-pagination__list"},[e.h("a",[e.h("span",g.value.pageLength),e.h("select",u,N)])]);t.push(G)}if(a.info&&t.push(e.h("li",{class:"v-pagination__info"},[e.h("a",k.value)])),"default"in l){const u=e.h("li",{class:"v-pagination__slot"},[e.h("a",l.default({pageNumber:n.value,pageSize:f.value,totalPage:d.value,totalRow:i.value,isFirst:A.value,isLast:L.value}))]);t.push(u)}if(a.first){const u=["v-pagination__first",{disabled:A.value}];t.push(y(u,s,g.value.first))}const P=["v-pagination__previous",{disabled:A.value}];t.push(y(P,n.value-1,g.value.previous)),a.pageNumber&&t.push(...I.value.map(u=>{const N={active:u===n.value};return y(N,u,u)}));const v=["v-pagination__next",{disabled:L.value}];if(t.push(y(v,n.value+1,g.value.next)),a.last){const u=["v-pagination__last",{disabled:L.value}];t.push(y(u,d.value,g.value.last))}return e.h("div",{class:D.value},[e.h("ul",t)])}}});h.install=(a,r={})=>{if(Object.keys(r).length){const{props:l}=h,{language:c,align:o,info:i,border:n,pageNumber:f,first:_,last:g,pageSizeMenu:b}=r;c&&(l.language.default=c),o&&(l.align.default=o),typeof i=="boolean"&&(l.info.default=i),typeof n=="boolean"&&(l.border.default=n),typeof f=="boolean"&&(l.pageNumber.default=f),typeof _=="boolean"&&(l.first.default=_),typeof g=="boolean"&&(l.last.default=g),typeof b<"u"&&(l.pageSizeMenu.default=b)}a.component(h.name,h)},p.Page=h,p.default=h,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,65 +1,66 @@
-{
-  "name": "v-page",
-  "description": "A simple pagination bar, based on Vue2.x",
-  "version": "2.0.9",
-  "author": "TerryZ <terry5@foxmail.com>",
-  "main": "dist/v-page.js",
-  "license": "MIT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "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"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/TerryZ/v-page.git"
-  },
-  "keywords": [
-    "front-end",
-    "web",
-    "vue",
-    "vuejs",
-    "page",
-    "pagination"
-  ],
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "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.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": "^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-node-externals": "^1.7.2"
-  },
-  "nyc": {
-    "include": [
-      "src/Page.js"
-    ],
-    "instrument": false,
-    "sourceMap": false
-  }
-}
+{
+  "name": "v-page",
+  "description": "A simple pagination bar",
+  "version": "3.0.0-beta.1",
+  "author": "TerryZ <terry5@foxmail.com>",
+  "type": "module",
+  "files": [
+    "/dist",
+    "/types"
+  ],
+  "main": "./dist/v-page.umd.cjs",
+  "module": "./dist/v-page.js",
+  "exports": {
+    ".": {
+      "import": "./dist/v-page.js",
+      "require": "./dist/v-page.umd.cjs"
+    }
+  },
+  "typings": "types/index.d.ts",
+  "license": "MIT",
+  
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerryZ/v-page.git"
+  },
+  "keywords": [
+    "front-end",
+    "web",
+    "vue",
+    "vuejs",
+    "page",
+    "pagination"
+  ],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "dependencies": {
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^2.0.2",
+    "bootstrap": "^5.2.0",
+    "c8": "^7.12.0",
+    "eslint": "^8.21.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "jsdom": "^20.0.0",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.9",
+    "vite-plugin-css-injected-by-js": "^2.0.3",
+    "vitest": "^0.21.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,81 @@
+import { DefineComponent, ComputedOptions, MethodOptions, ComponentOptionsMixin } from 'vue'
+
+type EmitEvents = 'update:modelValue' | 'change'
+
+/**
+ * Pagination plugin for Vue
+ */
+declare interface Props {
+  /**
+   * the number of current page
+   */
+  value: number
+  /**
+   * the number of total record
+   */
+  totalRow: number
+  /**
+   * v-page language (default: `cn`)
+   */
+  language?: string
+  /**
+   * page size list (default: [10, 20, 50, 100])
+   */
+  pageSizeMenu?: boolean|number[]
+  /**
+   * alignment direction (default: `right`)
+   */
+  align?: string
+  /**
+   * disabled the pagination (default: false)
+   */
+  disabled?: boolean
+  /**
+   * whether to display the border (default: true)
+   */
+  border?: boolean
+  /**
+   * whether to display page info bar (default: true)
+   */
+  info?: boolean
+  /**
+   * whether to display page number buttons (default: true)
+   */
+  pageNumber?: boolean
+  /**
+   * whether to display first page button (default: true)
+   */
+  first?: boolean
+  /**
+   * whether to display last page button (default: true)
+   */
+  last?: boolean
+  /**
+   * whether add `All` item in page length list (default: false)
+   */
+  displayAll?: boolean
+}
+
+declare interface Methods extends MethodOptions {
+  /** go to the specified page */
+  goPage: (pageNumber: number) => void
+  /** re-emit `change` event and output pagination states data */
+  reload: () => void
+}
+
+declare const Page: DefineComponent<
+  Props,
+  {},
+  {},
+  ComputedOptions,
+  Methods,
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  EmitEvents[],
+  EmitEvents,
+  Props
+>
+
+export { Page }
+
+export default Page

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-3", "es2015"
-  ]
-}

package/.circleci/config.yml

@@ -1,40 +0,0 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
-version: 2
-jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:8-browsers
-
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
-
-    working_directory: ~/repo
-
-    steps:
-      - checkout
-
-      # Download and cache dependencies
-      - restore_cache:
-          keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-
-
-      - run: npm install
-      - run: npm rebuild node-sass
-      - run: sudo npm install -g codecov
-
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
-
-      # run tests!
-      - run: npm run cover
-      - run: codecov

package/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true