v-page 3.0.0-beta.2 → 3.0.0-beta.4

package/README.md

@@ -8,18 +8,21 @@ If you are using vue `2.x` version, please use [v-page 2.x](https://github.com/T
 
 ## Examples and Documentation
 
-Examples and documentation please visit below sites
+Documentation and examples and please visit below sites
 
-- [github pages for english](https://terryz.github.io/vue/#/page)
-
-The jQuery version: [bPage](https://github.com/TerryZ/bPage)
+- [github-pages](https://terryz.github.io/docs-vue3/page/)
 
 ## Installation
 
 [![https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/v-page)
 
 ```sh
-npm i -S v-page
+# npm
+npm i v-page
+# yarn
+yarn add v-page
+# pnpm
+pnpm add v-page
 ```
 
 Include and install plugin in your `main.js` file
@@ -41,7 +44,7 @@ You also can use `v-page` in local component
 
 ```vue
 <template>
-  <page />
+  <Page />
 </template>
 
 <script setup>

package/dist/v-page.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){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(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+(function(){"use strict";try{if(typeof document<"u"){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;pointer-events: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(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 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,

package/dist/v-page.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document!="undefined"){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(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+(function(){"use strict";try{if(typeof document<"u"){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;pointer-events: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(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 (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:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页",all:"全部"},[x]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"«",next:"»",last:"Last",all:"All"},[B]:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"«",next:"»",last:"Letzte",all:"Alle"},[V]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ",all:"すべて"},[T]:{pageLength:"Resultados por página ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"Início",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,22 +1,25 @@
 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
-    "/dist",
-    "/types"
+    "./dist",
+    "./types"
   ],
   "main": "./dist/v-page.umd.cjs",
   "module": "./dist/v-page.js",
   "exports": {
     ".": {
-      "import": "./dist/v-page.js",
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/v-page.js"
+      },
       "require": "./dist/v-page.umd.cjs"
     }
   },
-  "typings": "types/index.d.ts",
+  "typings": "./types/index.d.ts",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
@@ -42,24 +45,24 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "vue": "^3.2.45"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/test-utils": "^2.2.7",
-    "bootstrap": "^5.2.3",
-    "c8": "^7.12.0",
-    "eslint": "^8.32.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^21.1.0",
-    "sass": "^1.57.1",
-    "sass-loader": "^13.2.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vitest": "^0.28.2"
+    "@vue/test-utils": "^2.4.1",
+    "bootstrap": "^5.3.1",
+    "c8": "^8.0.1",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^22.1.0",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vitest": "^0.34.4"
   }
 }

package/types/index.d.ts

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