v-page 3.0.0-beta.4 → 3.1.0

package/README.md

@@ -1,11 +1,18 @@
 # [v-page](https://terryz.github.io/vue/#/page) · [![CircleCI](https://dl.circleci.com/status-badge/img/gh/TerryZ/v-page/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/TerryZ/v-page/tree/master) [![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 for vue3, including size Menu, i18n support
+A simple pagination bar for vue3, including size Menu, i18n support features
 
 <img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
 
 If you are using vue `2.x` version, please use [v-page 2.x](https://github.com/TerryZ/v-page/tree/dev-vue-2) version instead
 
+<!-- ## Features
+
+- Simple interface style
+- I18n supported
+- Modularization of Pagination bar features
+-  -->
+
 ## Examples and Documentation
 
 Documentation and examples and please visit below sites
@@ -28,27 +35,27 @@ pnpm add v-page
 Include and install plugin in your `main.js` file
 
 ```js
-// add component in global scope as plugin
 import { createApp } from 'vue'
 import App from './app.vue'
-import Page from 'v-page'
+import { PaginationBar } from 'v-page'
 
 const app = createApp(App)
-app.use(Page, {
+// install component globally
+app.use(PaginationBar, {
   // globally config options
 })
 app.mount('#app')
 ```
 
-You also can use `v-page` in local component
+Use `v-page` as a locally component
 
 ```vue
 <template>
-  <Page />
+  <PaginationBar />
 </template>
 
 <script setup>
-import { Page } from 'v-page'
+import { PaginationBar } from 'v-page'
 </script>
 ```
 
@@ -56,21 +63,23 @@ import { Page } from 'v-page'
 
 ```vue
 <template>
-  <v-page
+  <PaginationBar
     v-model="pageNumber"
     :total-row="totalRow"
-    @change="pageChange"
+    @change="paginationChange"
   />
 </template>
 
-<script setup>
+<script setup lang='ts'>
 import { ref } from 'vue'
-
-const pageNumber = ref(3)
-const totalRow = ref(100)
+import { PaginationBar } from 'v-page'
+import type { PageInfo } from 'v-page/types'
+// set default page to 3
+const pageNumber = ref<number>(3)
+const totalRow = ref<number>(100)
 // respond for pagination change
-function pageChange (data) {
-  console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
+function paginationChange (data: PageInfo): void {
+  console.log(data) // { pageNumber: 1, pageSize: 10, totalPage: 10 }
 }
 </script>
 ```

package/dist/v-page.js

@@ -1,13 +1,13 @@
-(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,
-  T,
-  D,
-  G,
-  Z
+(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.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.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;display:inline-flex;align-items:center}.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!important;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:.3rem}.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 U, toRefs as V, ref as P, computed as v, watch as x, onMounted as Z, h as o } from "vue";
+const g = 1, k = 5, C = 10, F = [C, 20, 50, 100], G = 0, [ee, ae, H] = ["left", "center", "right"], [
+  J,
+  L,
+  q,
+  K,
+  Q
 ] = ["cn", "en", "de", "jp", "pt"], I = {
-  [z]: {
+  [J]: {
     pageLength: "每页记录数 ",
     pageInfo: "当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",
     first: "首页",
@@ -16,7 +16,7 @@ const [
     last: "尾页",
     all: "全部"
   },
-  [T]: {
+  [L]: {
     pageLength: "Page length ",
     pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)",
     first: "First",
@@ -25,7 +25,7 @@ const [
     last: "Last",
     all: "All"
   },
-  [D]: {
+  [q]: {
     pageLength: "Seitenlänge ",
     pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",
     first: "Zuerst",
@@ -34,7 +34,7 @@ const [
     last: "Letzte",
     all: "Alle"
   },
-  [G]: {
+  [K]: {
     pageLength: "ページごとの記録数",
     pageInfo: "現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",
     first: "トップページ",
@@ -43,7 +43,7 @@ const [
     last: "尾のページ",
     all: "すべて"
   },
-  [Z]: {
+  [Q]: {
     pageLength: "Resultados por página ",
     pageInfo: "#pageNumber# / #totalPage# (total de #totalRow#)",
     first: "Início",
@@ -52,37 +52,36 @@ const [
     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 W(e, n, t) {
+  if (n <= t) return g;
+  const c = Math.floor(t / 2), s = n - t + 1, u = e - c;
+  return u < g ? g : u > s ? s : u;
+}
+function X(e, n, t) {
+  const c = W(e, n, t);
+  return Array.from({ length: t }).map((s, u) => c + u).filter((s) => s >= g && s <= n);
 }
-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);
+function Y(e = L) {
+  const n = String(e).toLowerCase();
+  return n in I ? I[n] : I[L];
 }
-const R = F({
-  name: "VPage",
+const A = U({
+  name: "PaginationBar",
   props: {
     modelValue: { type: Number, default: 0 },
     totalRow: { type: Number, default: 0 },
-    language: { type: String, default: z },
-    /**
-     * Page size list
-     * false: close page size list
-     * array: custom page sizes list
-     */
-    pageSizeMenu: {
-      type: [Boolean, Array],
-      default: () => q
-    },
+    pageSize: { type: Number, default: C },
+    language: { type: String, default: L },
     /**
      * Pagination alignment direction
      * `left`, `center` and `right`(default)
      */
-    align: { type: String, default: "right" },
+    align: { type: String, default: H },
+    /** Page size list */
+    pageSizeMenu: { type: [Array], default: () => F },
+    /** Display page size menu panel */
+    pageSizeOptions: { type: Boolean, default: !0 },
     disabled: { type: Boolean, default: !1 },
     border: { type: Boolean, default: !1 },
     info: { type: Boolean, default: !0 },
@@ -91,139 +90,142 @@ const R = F({
     first: { type: Boolean, default: !0 },
     /** last page button */
     last: { type: Boolean, default: !0 },
-    /** display all records */
-    displayAll: { type: Boolean, default: !1 }
+    /**
+     * Display all records
+     *
+     * will add `all` option in page size list
+     * and the page size will be 0
+     */
+    displayAll: { type: Boolean, default: !1 },
+    /** Hide pagination when only have one page */
+    hideOnSinglePage: { 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(
+  emits: ["update:modelValue", "update:pageSize", "change"],
+  setup(e, { emit: n, slots: t, expose: c }) {
+    const { pageSizeOptions: s, pageSizeMenu: u, totalRow: b } = V(e), l = P(0), m = P(-1), S = P(k), f = Y(e.language), T = v(() => Array.isArray(u.value) && u.value.length > 0 ? u.value : F), p = P(e.pageSize || C), r = v(() => p.value === G ? g : Math.ceil(b.value / p.value)), B = v(() => X(
       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(() => ({
+      r.value,
+      S.value
+    )), O = v(
+      () => f.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", r.value).replace("#totalRow#", b.value)
+    ), D = v(() => ({
       "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());
+    })), E = v(() => l.value === g), R = v(() => l.value === r.value);
+    x(() => e.modelValue, (a) => y(a)), x(() => e.pageSize, M);
+    function y(a = g) {
+      if (e.disabled || typeof a != "number") return;
+      let d = a < g ? g : a;
+      a > r.value && r.value > 0 && (d = r.value), !(d === l.value && p.value === m.value) && (l.value = d, m.value = p.value, w());
     }
     function w() {
-      s("change", {
+      n("change", {
         pageNumber: l.value,
-        pageSize: Number(f.value)
-      });
+        pageSize: Number(p.value),
+        totalPage: r.value
+      }), n("update:modelValue", l.value), n("update:pageSize", p.value);
     }
-    function h(a, y, d) {
-      return u("li", { class: a }, [u("a", {
+    function M(a) {
+      a < 0 || a !== p.value && (p.value = a, y());
+    }
+    function _(a, d, z) {
+      return o("li", { class: a }, [o("a", {
         href: "javascript:void(0)",
-        onClick: () => m(y)
-      }, d)]);
+        onClick: () => y(d)
+      }, z)]);
     }
-    return O(() => {
-      m(e.modelValue || r);
-    }), v({
+    return Z(() => {
+      y(e.modelValue || g);
+    }), c({
+      goPage: y,
       current: l,
-      totalPage: p,
-      pageNumbers: C,
-      goPage: m,
+      totalPage: r,
+      pageNumbers: B,
       reload: w
     }), () => {
+      if (e.hideOnSinglePage && r.value <= 1) return;
       const a = [];
-      if (Array.isArray(n.value) && n.value.length) {
+      if (s.value) {
         const i = {
           disabled: e.disabled,
-          onChange: (S) => {
-            f.value = Number(S.target.value), m();
-          }
-        }, _ = n.value.map(
-          (S) => u("option", { value: S }, S)
+          onChange: (N) => M(Number(N.target.value))
+        }, h = T.value.map(
+          (N) => o("option", { value: N }, N)
         );
-        e.displayAll && _.push(
-          u("option", { value: x }, g.value.all)
+        e.displayAll && h.push(
+          o("option", { value: G }, f.all)
         );
-        const E = u("li", { class: "v-pagination__list" }, [
-          u("a", [
-            u("span", g.value.pageLength),
-            u("select", i, _)
+        const j = o("li", { class: "v-pagination__list" }, [
+          o("a", { href: "javascript:void(0)" }, [
+            o("span", f.pageLength),
+            o("select", i, h)
           ])
         ]);
-        a.push(E);
+        a.push(j);
       }
       if (e.info && a.push(
-        u("li", { class: "v-pagination__info" }, [u("a", M.value)])
+        o("li", { class: "v-pagination__info" }, [
+          o("a", { href: "javascript:void(0)" }, O.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
-            })
-          )
+        const i = {
+          pageNumber: l.value,
+          pageSize: p.value,
+          totalPage: r.value,
+          totalRow: b.value,
+          isFirst: E.value,
+          isLast: R.value
+        }, h = o("li", { class: "v-pagination__slot" }, [
+          o("a", t.default(i))
         ]);
-        a.push(i);
+        a.push(h);
       }
       if (e.first) {
-        const i = ["v-pagination__first", { disabled: A.value }];
-        a.push(h(i, r, g.value.first));
+        const i = ["v-pagination__first", { disabled: E.value }];
+        a.push(_(i, g, f.first));
       }
-      const y = ["v-pagination__previous", { disabled: A.value }];
+      const d = ["v-pagination__previous", { disabled: E.value }];
       a.push(
-        h(y, l.value - 1, g.value.previous)
+        _(d, l.value - 1, f.previous)
       ), e.pageNumber && a.push(
-        ...C.value.map((i) => {
-          const _ = { active: i === l.value };
-          return h(_, i, i);
+        ...B.value.map((i) => {
+          const h = { active: i === l.value };
+          return _(h, i, i);
         })
       );
-      const d = ["v-pagination__next", { disabled: L.value }];
+      const z = ["v-pagination__next", { disabled: R.value }];
       if (a.push(
-        h(d, l.value + 1, g.value.next)
+        _(z, l.value + 1, f.next)
       ), e.last) {
-        const i = ["v-pagination__last", { disabled: L.value }];
+        const i = ["v-pagination__last", { disabled: R.value }];
         a.push(
-          h(i, p.value, g.value.last)
+          _(i, r.value, f.last)
         );
       }
-      return u("div", { class: V.value }, [u("ul", a)]);
+      return o("div", { class: D.value }, [o("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);
+A.install = (e, n = {}) => {
+  if (Object.keys(n).length) {
+    const { props: t } = A, {
+      language: c,
+      align: s,
+      info: u,
+      border: b,
+      pageNumber: l,
+      first: m,
+      last: S,
+      pageSizeMenu: f
+    } = n;
+    c && (t.language.default = c), s && (t.align.default = s), typeof u == "boolean" && (t.info.default = u), typeof b == "boolean" && (t.border.default = b), typeof l == "boolean" && (t.pageNumber.default = l), typeof m == "boolean" && (t.first.default = m), typeof S == "boolean" && (t.last.default = S), typeof f < "u" && (t.pageSizeMenu.default = f);
   }
-  e.component(R.name, R);
+  e.component(A.name, A);
 };
 export {
-  R as Page,
-  R as default
+  A as PaginationBar,
+  A as default
 };

package/dist/v-page.umd.cjs

@@ -1,2 +1,2 @@
-(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"}})});
+(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.v-pagination--disabled a,.v-pagination.v-pagination--disabled select{color:#999!important}.v-pagination.v-pagination--disabled.v-pagination--border a,.v-pagination.v-pagination--disabled.v-pagination--border a:hover{background-color:#fafafa}.v-pagination ul{margin:0;padding:0;display:flex}.v-pagination ul li{list-style:none;display:flex}.v-pagination ul li.v-pagination__info a,.v-pagination ul li.v-pagination__list a{cursor:default;color:#333}.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;display:inline-flex;align-items:center}.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!important;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:.3rem}.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 L=[10,20,50,100],N=0,[K,Q,C]=["left","center","right"],[G,y,M,w,D]=["cn","en","de","jp","pt"],P={[G]:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页",all:"全部"},[y]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"«",next:"»",last:"Last",all:"All"},[M]:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"«",next:"»",last:"Letzte",all:"Alle"},[w]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ",all:"すべて"},[D]:{pageLength:"Resultados por página ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"Início",previous:"<",next:">",last:"Fim",all:"Todos"}};function U(a,o,n){if(o<=n)return 1;const d=Math.floor(n/2),s=o-n+1,u=a-d;return u<1?1:u>s?s:u}function x(a,o,n){const d=U(a,o,n);return Array.from({length:n}).map((s,u)=>d+u).filter(s=>s>=1&&s<=o)}function Z(a=y){const o=String(a).toLowerCase();return o in P?P[o]:P[y]}const h=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},totalRow:{type:Number,default:0},pageSize:{type:Number,default:10},language:{type:String,default:y},align:{type:String,default:C},pageSizeMenu:{type:[Array],default:()=>L},pageSizeOptions:{type:Boolean,default:!0},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},hideOnSinglePage:{type:Boolean,default:!1}},emits:["update:modelValue","update:pageSize","change"],setup(a,{emit:o,slots:n,expose:d}){const{pageSizeOptions:s,pageSizeMenu:u,totalRow:v}=e.toRefs(a),l=e.ref(0),S=e.ref(-1),E=e.ref(5),f=Z(a.language),O=e.computed(()=>Array.isArray(u.value)&&u.value.length>0?u.value:L),g=e.ref(a.pageSize||10),r=e.computed(()=>g.value===N?1:Math.ceil(v.value/g.value)),F=e.computed(()=>x(l.value,r.value,E.value)),j=e.computed(()=>f.pageInfo.replace("#pageNumber#",l.value).replace("#totalPage#",r.value).replace("#totalRow#",v.value)),V=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})),R=e.computed(()=>l.value===1),A=e.computed(()=>l.value===r.value);e.watch(()=>a.modelValue,t=>b(t)),e.watch(()=>a.pageSize,B);function b(t=1){if(a.disabled||typeof t!="number")return;let c=t<1?1:t;t>r.value&&r.value>0&&(c=r.value),!(c===l.value&&g.value===S.value)&&(l.value=c,S.value=g.value,z())}function z(){o("change",{pageNumber:l.value,pageSize:Number(g.value),totalPage:r.value}),o("update:modelValue",l.value),o("update:pageSize",g.value)}function B(t){t<0||t!==g.value&&(g.value=t,b())}function _(t,c,T){const i={href:"javascript:void(0)",onClick:()=>b(c)};return e.h("li",{class:t},[e.h("a",i,T)])}return e.onMounted(()=>{b(a.modelValue||1)}),d({goPage:b,current:l,totalPage:r,pageNumbers:F,reload:z}),()=>{if(a.hideOnSinglePage&&r.value<=1)return;const t=[];if(s.value){const i={disabled:a.disabled,onChange:I=>B(Number(I.target.value))},m=O.value.map(I=>e.h("option",{value:I},I));a.displayAll&&m.push(e.h("option",{value:N},f.all));const k=e.h("li",{class:"v-pagination__list"},[e.h("a",{href:"javascript:void(0)"},[e.h("span",f.pageLength),e.h("select",i,m)])]);t.push(k)}if(a.info&&t.push(e.h("li",{class:"v-pagination__info"},[e.h("a",{href:"javascript:void(0)"},j.value)])),"default"in n){const i={pageNumber:l.value,pageSize:g.value,totalPage:r.value,totalRow:v.value,isFirst:R.value,isLast:A.value},m=e.h("li",{class:"v-pagination__slot"},[e.h("a",n.default(i))]);t.push(m)}if(a.first){const i=["v-pagination__first",{disabled:R.value}];t.push(_(i,1,f.first))}const c=["v-pagination__previous",{disabled:R.value}];t.push(_(c,l.value-1,f.previous)),a.pageNumber&&t.push(...F.value.map(i=>{const m={active:i===l.value};return _(m,i,i)}));const T=["v-pagination__next",{disabled:A.value}];if(t.push(_(T,l.value+1,f.next)),a.last){const i=["v-pagination__last",{disabled:A.value}];t.push(_(i,r.value,f.last))}return e.h("div",{class:V.value},[e.h("ul",t)])}}});h.install=(a,o={})=>{if(Object.keys(o).length){const{props:n}=h,{language:d,align:s,info:u,border:v,pageNumber:l,first:S,last:E,pageSizeMenu:f}=o;d&&(n.language.default=d),s&&(n.align.default=s),typeof u=="boolean"&&(n.info.default=u),typeof v=="boolean"&&(n.border.default=v),typeof l=="boolean"&&(n.pageNumber.default=l),typeof S=="boolean"&&(n.first.default=S),typeof E=="boolean"&&(n.last.default=E),typeof f<"u"&&(n.pageSizeMenu.default=f)}a.component(h.name,h)},p.PaginationBar=h,p.default=h,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-page",
   "description": "A simple pagination bar",
-  "version": "3.0.0-beta.4",
+  "version": "3.1.0",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
@@ -17,6 +17,11 @@
         "default": "./dist/v-page.js"
       },
       "require": "./dist/v-page.umd.cjs"
+    },
+    "./types": {
+      "import": {
+        "types": "./types/index.d.ts"
+      }
     }
   },
   "typings": "./types/index.d.ts",
@@ -42,27 +47,27 @@
     "pagination"
   ],
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.4.0"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.4.29"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/test-utils": "^2.4.1",
-    "bootstrap": "^5.3.1",
-    "c8": "^8.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "bootstrap": "^5.3.3",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.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"
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vitest": "^1.6.0"
   }
 }

package/types/index.d.ts

@@ -1,33 +1,23 @@
 import {
-  DefineComponent,
-  ComputedOptions,
-  MethodOptions,
-  ComponentOptionsMixin,
-  ObjectEmitsOptions,
-  SlotsType
+  AllowedComponentProps,
+  ComponentCustomProps,
+  VNodeProps,
+  VNode
 } from 'vue'
 
 export declare interface PageInfo {
   pageNumber: number
   pageSize: number
+  totalPage: 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
-}
-
-declare interface Slots extends SlotsType {
-  default: {
-    pageNumber: number
-    pageSize: number
-    totalPage: number
-    totalRow: number
-    isFirst: boolean
-    isLast: boolean
-  }
+export declare interface PageSlotData {
+  pageNumber: number
+  pageSize: number
+  totalPage: number
+  totalRow: number
+  isFirst: boolean
+  isLast: boolean
 }
 
 /**
@@ -42,16 +32,26 @@ declare interface Props {
    * The number of total record
    */
   totalRow: number
+  /**
+   * The number of page size
+   * @default 10
+   */
+  pageSize?: number
   /**
    * v-page language
-   * @default `cn`
+   * @default `en`
    */
   language?: string
   /**
    * Page size list
    * @default [10, 20, 50, 100]
    */
-  pageSizeMenu?: boolean|number[]
+  pageSizeMenu?: number[]
+  /**
+   * Whether to display page size list panel
+   * @default true
+   */
+  pageSizeOptions?: boolean
   /**
    * Alignment direction
    * @default `right`
@@ -92,31 +92,44 @@ declare interface Props {
    * @default false
    */
   displayAll?: boolean
+  /**
+   * Hide pagination when only have one page
+   * @default false
+   */
+  hideOnSinglePage?: 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 interface Emits {
+//   /** Update pageNumber value */
+//   'onUpdate:modelValue'?: (pageNumber: number) => void
+//   /** The event respond pageNumber or pageSize change */
+//   onChange?: (data: PageInfo) => void
+// }
 
-declare const Page: DefineComponent<
-  Props,
-  {},
-  {},
-  ComputedOptions,
-  Methods,
-  ComponentOptionsMixin,
-  ComponentOptionsMixin,
-  EmitEvents,
-  '',
-  {},
-  {},
-  {},
-  Slots
->
+// 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
+// }
+// $emit: ((event: "update:modelValue", value: boolean) => void) & ((event: "click:close", e: MouseEvent) => void)
+
+/** Update pageNumber value */
+type EmitUpdateModelValue = (event: "update:modelValue", value: number) => void
+/** The event respond pageNumber or pageSize change */
+type EmitChange = (event: "change", value: PageInfo) => void
+
+declare interface PaginationBar {
+  new (): {
+    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props
+    $emit: EmitUpdateModelValue & EmitChange
+    $slots: {
+      default?: (defaultSlotData: PageSlotData) => VNode[]
+    }
+  }
+}
+declare const PaginationBar: PaginationBar
 
-export { Page }
+export { PaginationBar }
 
-export default Page
+export default PaginationBar