v-page 3.0.0 → 3.2.0

package/README.md

@@ -47,7 +47,7 @@ app.use(PaginationBar, {
 app.mount('#app')
 ```
 
-You can also use `v-page` as a locally component
+Use `v-page` as a locally component
 
 ```vue
 <template>
@@ -70,15 +70,16 @@ import { PaginationBar } from 'v-page'
   />
 </template>
 
-<script setup>
+<script setup lang='ts'>
 import { ref } from 'vue'
 import { PaginationBar } from 'v-page'
+import type { PageInfo } from 'v-page'
 // set default page to 3
-const pageNumber = ref(3)
-const totalRow = ref(100)
+const pageNumber = ref<number>(3)
+const totalRow = ref<number>(100)
 // respond for pagination change
-function paginationChange (data) {
-  console.log(data) // { 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,228 +1,339 @@
-(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 F, toRefs as V, ref as N, computed as b, watch as k, onMounted as D, h as u } from "vue";
+(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:#ddd!important}.v-pagination.v-pagination--disabled .v-pagination__item a{cursor:default!important}.v-pagination.v-pagination--disabled .v-pagination__item a:hover{background-color:transparent}.v-pagination.v-pagination--disabled.v-pagination--border ul{background-color:#fafafa}.v-pagination.v-pagination--circle .v-pagination__item a{border-radius:50rem;border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item a:hover{border:1px solid #f7f7f7}.v-pagination.v-pagination--circle .v-pagination__item.disabled a:hover{border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item.active a{border:1px solid #ddd!important;background-color:transparent!important;box-shadow:0 1px 3px #0000001a}.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:.5rem;display:inline-flex;align-items:center;cursor:default;transition:all .3s}.v-pagination ul li.v-pagination__list a,.v-pagination ul li.v-pagination__info a{color:#888}.v-pagination ul li.active a,.v-pagination ul li.disabled a{cursor:default!important}.v-pagination ul li.v-pagination__item a:hover{background-color:#f7f7f7;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;color:#aaa}.v-pagination ul li.disabled a{color:#ddd!important}.v-pagination ul li.disabled a:hover{background-color:transparent}.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:.5rem}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-left:0;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem;border-left:1px solid #DEE2E6}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.v-pagination.v-pagination--border ul li.active a{color:#aaa;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { toRefs as Z, ref as A, computed as b, watch as w, onMounted as k, createVNode as a, defineComponent as H } from "vue";
 const [
-  O,
-  z,
-  T,
-  G,
-  Z
-] = ["cn", "en", "de", "jp", "pt"], B = {
-  [O]: {
-    pageLength: "每页记录数 ",
-    pageInfo: "当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",
+  J,
+  y,
+  q,
+  K,
+  Q
+] = ["cn", "en", "de", "jp", "pt"], O = {
+  [J]: {
+    pageLength: "每页记录数",
+    pageInfo: "第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",
     first: "首页",
-    previous: "«",
-    next: "»",
     last: "尾页",
     all: "全部"
   },
-  [z]: {
-    pageLength: "Page length ",
-    pageInfo: "Current #pageNumber# / #totalPage# (total #totalRow# records)",
+  [y]: {
+    pageLength: "Per page",
+    pageInfo: "Page #pageNumber#/#totalPage# (total #totalRow# records)",
     first: "First",
-    previous: "«",
-    next: "»",
     last: "Last",
     all: "All"
   },
-  [T]: {
-    pageLength: "Seitenlänge ",
-    pageInfo: "Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",
+  [q]: {
+    pageLength: "Seitenlänge",
+    pageInfo: "Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",
     first: "Zuerst",
-    previous: "«",
-    next: "»",
     last: "Letzte",
     all: "Alle"
   },
-  [G]: {
+  [K]: {
     pageLength: "ページごとの記録数",
-    pageInfo: "現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",
+    pageInfo: "現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",
     first: "トップページ",
-    previous: "«",
-    next: "»",
     last: "尾のページ",
     all: "すべて"
   },
-  [Z]: {
-    pageLength: "Resultados por página ",
-    pageInfo: "#pageNumber# / #totalPage# (total de #totalRow#)",
+  [Q]: {
+    pageLength: "Resultados por página",
+    pageInfo: "#pageNumber#/#totalPage# (total de #totalRow#)",
     first: "Início",
-    previous: "<",
-    next: ">",
     last: "Fim",
     all: "Todos"
   }
-}, r = 1, J = 5, x = 10, q = [x, 20, 50, 100], I = 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;
+}, s = 1, W = 5, E = 10, F = [E, 20, 50, 100], z = 0, [le, ne, X] = ["left", "center", "right"];
+function Y(e, u, l) {
+  if (u <= l) return s;
+  const f = Math.floor(l / 2), i = u - l + 1, r = e - f;
+  return r < s ? s : r > i ? i : r;
 }
-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 $(e, u, l) {
+  const f = Y(e, u, l);
+  return Array.from({ length: l }).map((i, r) => f + r).filter((i) => i >= s && i <= u);
 }
-const R = F({
+function ee(e = y) {
+  const u = String(e).toLowerCase();
+  return O[Object.hasOwn(O, u) ? u : y];
+}
+function ae(e, u, l) {
+  const {
+    pageSizeOptions: f,
+    pageSizeMenu: i,
+    totalRow: r
+  } = Z(e), n = A(0), v = A(W), o = A(e.pageSize ?? E), c = ee(e.language), m = b(() => {
+    if (!f.value) return [];
+    const t = Array.isArray(i.value) && i.value.length > 0 ? i.value : F, d = new Set(t);
+    return d.add(o.value), [...d].sort((p, L) => p - L);
+  }), g = b(() => o.value === z ? s : Math.ceil(r.value / o.value)), N = b(() => $(n.value, g.value, v.value)), V = b(() => ({
+    "v-pagination": !0,
+    "v-pagination--right": e.align === "right",
+    "v-pagination--center": e.align === "center",
+    "v-pagination--disabled": e.disabled,
+    "v-pagination--border": e.border,
+    "v-pagination--circle": !e.border && e.circle
+  })), I = b(() => n.value === s), _ = b(() => n.value === g.value);
+  w(() => e.modelValue, h), w(() => e.pageSize, R);
+  function h(t = s) {
+    if (e.disabled || typeof t != "number") return;
+    let d = t < s ? s : t;
+    t > g.value && g.value > 0 && (d = g.value), d !== n.value && (n.value = d, u("update:modelValue", n.value), B());
+  }
+  function R(t) {
+    if (!(t < 0) && t !== o.value) {
+      if (o.value = t, u("update:pageSize", o.value), n.value === s)
+        return B();
+      h(s);
+    }
+  }
+  function B() {
+    u("change", {
+      pageNumber: n.value,
+      pageSize: Number(o.value),
+      totalPage: g.value
+    });
+  }
+  function C() {
+    if (!f.value) return null;
+    const t = () => m.value.map((p) => a("option", {
+      value: p,
+      selected: o.value === p
+    }, [p])), d = () => e.displayAll ? a("option", {
+      value: z,
+      selected: o.value === z
+    }, [c.all]) : null;
+    return a("li", {
+      class: "v-pagination__list"
+    }, [a("a", {
+      href: "javascript:void(0)"
+    }, [a("span", null, [c.pageLength]), a("select", {
+      disabled: e.disabled,
+      onChange: (p) => R(Number(p.target.value))
+    }, [a(t, null, null), a(d, null, null)])])]);
+  }
+  function M() {
+    if (!e.info) return null;
+    const t = c.pageInfo.replace("#pageNumber#", n.value).replace("#totalPage#", g.value).replace("#totalRow#", r.value);
+    return a("li", {
+      class: "v-pagination__info"
+    }, [a("a", {
+      href: "javascript:void(0)"
+    }, [t])]);
+  }
+  function T() {
+    if (!Object.hasOwn(l, "default")) return null;
+    const t = {
+      pageNumber: n.value,
+      pageSize: o.value,
+      totalPage: g.value,
+      totalRow: r.value,
+      isFirst: I.value,
+      isLast: _.value
+    };
+    return a("li", {
+      class: "v-pagination__slot"
+    }, [a("a", {
+      href: "javascript:void(0)"
+    }, [l.default(t)])]);
+  }
+  function P({
+    classes: t,
+    pageNumberValue: d,
+    name: p,
+    hasItem: L = !0
+  }) {
+    return L ? a("li", {
+      class: ["v-pagination__item", ...t]
+    }, [a("a", {
+      href: "javascript:void(0)",
+      onClick: () => h(d)
+    }, [p])]) : null;
+  }
+  function j() {
+    return e.pageNumber ? N.value.map((t) => a(P, {
+      classes: [{
+        active: t === n.value
+      }],
+      pageNumberValue: t,
+      name: t
+    }, null)) : null;
+  }
+  function G() {
+    return a(P, {
+      classes: ["v-pagination__first", {
+        disabled: I.value
+      }],
+      pageNumberValue: s,
+      name: c.first,
+      hasItem: e.first
+    }, null);
+  }
+  function D() {
+    return a(P, {
+      classes: ["v-pagination__previous", {
+        disabled: I.value
+      }],
+      pageNumberValue: n.value - 1,
+      name: "«"
+    }, null);
+  }
+  function x() {
+    return a(P, {
+      classes: ["v-pagination__next", {
+        disabled: _.value
+      }],
+      pageNumberValue: n.value + 1,
+      name: "»"
+    }, null);
+  }
+  function U() {
+    return a(P, {
+      classes: ["v-pagination__last", {
+        disabled: _.value
+      }],
+      pageNumberValue: g.value,
+      name: c.last,
+      hasItem: e.last
+    }, null);
+  }
+  return k(() => h(e.modelValue || s)), {
+    containerClasses: V,
+    totalPage: g,
+    current: n,
+    pageNumbers: N,
+    PageSizeOptions: C,
+    PageInformation: M,
+    PageSlot: T,
+    PageNumberItems: j,
+    FirstPageItem: G,
+    PreviousPageItem: D,
+    NextPageItem: x,
+    LastPageItem: U
+  };
+}
+const S = /* @__PURE__ */ H({
   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
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: E
+    },
+    totalRow: {
+      type: Number,
+      default: 0
+    },
+    language: {
+      type: String,
+      default: y
     },
     /**
      * Pagination alignment direction
      * `left`, `center` and `right`(default)
      */
-    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 },
+    align: {
+      type: String,
+      default: X
+    },
+    /** Page size list */
+    pageSizeMenu: {
+      type: [Array],
+      default: () => F
+    },
+    /** Display page size menu panel */
+    pageSizeOptions: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** Round style page number button */
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    border: {
+      type: Boolean,
+      default: !1
+    },
+    info: {
+      type: Boolean,
+      default: !0
+    },
+    pageNumber: {
+      type: Boolean,
+      default: !0
+    },
     /** first page button */
-    first: { type: Boolean, default: !0 },
+    first: {
+      type: Boolean,
+      default: !0
+    },
     /** last page button */
-    last: { type: Boolean, default: !0 },
-    /** display all records */
-    displayAll: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: s, slots: t, expose: v }) {
-    const { pageSizeMenu: n, totalRow: o } = V(e), l = N(0), f = N(
-      n.value === !1 ? x : n.value[0]
-    ), _ = N(J), g = N(B[e.language] || B[z]), m = N(-1), p = b(() => f.value === I ? r : Math.ceil(o.value / f.value)), C = b(() => K(
-      l.value,
-      p.value,
-      _.value
-    )), M = b(() => g.value.pageInfo.replace("#pageNumber#", l.value).replace("#totalPage#", p.value).replace("#totalRow#", o.value)), j = b(() => ({
-      "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 = b(() => l.value === r), L = b(() => l.value === p.value);
-    k(
-      () => e.modelValue,
-      (a) => {
-        typeof a == "number" && a > 0 && h(a, !1);
-      }
-    );
-    function h(a = r, P = !0) {
-      if (e.disabled || typeof a != "number")
-        return;
-      let c = a < r ? r : a;
-      a > p.value && p.value > 0 && (c = p.value), !(c === l.value && f.value === m.value) && (l.value = c, P && s("update:modelValue", l.value), m.value = f.value, w());
-    }
-    function w() {
-      s("change", {
-        pageNumber: l.value,
-        pageSize: Number(f.value)
-      });
-    }
-    function y(a, P, c) {
-      return u("li", { class: a }, [u("a", {
-        href: "javascript:void(0)",
-        onClick: () => h(P)
-      }, c)]);
+    last: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * 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
     }
-    return D(() => {
-      h(e.modelValue || r);
-    }), v({
-      current: l,
-      totalPage: p,
-      pageNumbers: C,
-      goPage: h,
-      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), h();
-          }
-        }, d = n.value.map(
-          (S) => u("option", { value: S }, S)
-        );
-        e.displayAll && d.push(
-          u("option", { value: I }, g.value.all)
-        );
-        const E = u("li", { class: "v-pagination__list" }, [
-          u("a", { href: "javascript:void(0)" }, [
-            u("span", g.value.pageLength),
-            u("select", i, d)
-          ])
-        ]);
-        a.push(E);
-      }
-      if (e.info && a.push(
-        u("li", { class: "v-pagination__info" }, [
-          u("a", { href: "javascript:void(0)" }, M.value)
-        ])
-      ), "default" in t) {
-        const i = {
-          pageNumber: l.value,
-          pageSize: f.value,
-          totalPage: p.value,
-          totalRow: o.value,
-          isFirst: A.value,
-          isLast: L.value
-        }, d = u("li", { class: "v-pagination__slot" }, [
-          u("a", t.default(i))
-        ]);
-        a.push(d);
-      }
-      if (e.first) {
-        const i = ["v-pagination__first", { disabled: A.value }];
-        a.push(y(i, r, g.value.first));
-      }
-      const P = ["v-pagination__previous", { disabled: A.value }];
-      a.push(
-        y(P, l.value - 1, g.value.previous)
-      ), e.pageNumber && a.push(
-        ...C.value.map((i) => {
-          const d = { active: i === l.value };
-          return y(d, i, i);
-        })
-      );
-      const c = ["v-pagination__next", { disabled: L.value }];
-      if (a.push(
-        y(c, l.value + 1, g.value.next)
-      ), e.last) {
-        const i = ["v-pagination__last", { disabled: L.value }];
-        a.push(
-          y(i, p.value, g.value.last)
-        );
-      }
-      return u("div", { class: j.value }, [u("ul", a)]);
-    };
+  },
+  emits: ["update:modelValue", "update:pageSize", "change"],
+  setup(e, {
+    emit: u,
+    slots: l
+  }) {
+    const {
+      containerClasses: f,
+      totalPage: i,
+      PageSizeOptions: r,
+      PageInformation: n,
+      PageSlot: v,
+      PageNumberItems: o,
+      FirstPageItem: c,
+      PreviousPageItem: m,
+      NextPageItem: g,
+      LastPageItem: N
+    } = ae(e, u, l);
+    return () => e.hideOnSinglePage && i.value <= 1 ? null : a("div", {
+      class: f.value
+    }, [a("ul", null, [a(r, null, null), a(n, null, null), a(v, null, null), a(c, null, null), a(m, null, null), a(o, null, null), a(g, null, null), a(N, null, null)])]);
   }
 });
-R.install = (e, s = {}) => {
-  if (Object.keys(s).length) {
-    const { props: t } = R, {
-      language: v,
-      align: n,
-      info: o,
-      border: l,
-      pageNumber: f,
-      first: _,
-      last: g,
+S.install = (e, u = {}) => {
+  if (Object.keys(u).length) {
+    const { props: l } = S, {
+      language: f,
+      align: i,
+      info: r,
+      border: n,
+      pageNumber: v,
+      first: o,
+      last: c,
       pageSizeMenu: m
-    } = 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 _ == "boolean" && (t.first.default = _), typeof g == "boolean" && (t.last.default = g), typeof m < "u" && (t.pageSizeMenu.default = m);
+    } = u;
+    f && (l.language.default = f), i && (l.align.default = i), typeof r == "boolean" && (l.info.default = r), typeof n == "boolean" && (l.border.default = n), typeof v == "boolean" && (l.pageNumber.default = v), typeof o == "boolean" && (l.first.default = o), typeof c == "boolean" && (l.last.default = c), typeof m < "u" && (l.pageSizeMenu.default = m);
   }
-  e.component(R.name, R);
+  e.component(S.name, S);
 };
 export {
-  R as PaginationBar,
-  R as default
+  S as PaginationBar,
+  S 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.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 Z="",[M,R,x,j,V]=["cn","en","de","jp","pt"],z={[M]:{pageLength:"每页记录数 ",pageInfo:"当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）",first:"首页",previous:"«",next:"»",last:"尾页",all:"全部"},[R]:{pageLength:"Page length ",pageInfo:"Current #pageNumber# / #totalPage# (total #totalRow# records)",first:"First",previous:"«",next:"»",last:"Last",all:"All"},[x]:{pageLength:"Seitenlänge ",pageInfo:"Aktuell #pageNumber# / #totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",previous:"«",next:"»",last:"Letzte",all:"Alle"},[j]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）",first:"トップページ",previous:"«",next:"»",last:"尾のページ",all:"すべて"},[V]:{pageLength:"Resultados por página ",pageInfo:"#pageNumber# / #totalPage# (total de #totalRow#)",first:"Início",previous:"<",next:">",last:"Fim",all:"Todos"}},s=1,T=5,B=10,E=[B,20,50,100],C=0;function F(a,r,l){if(r<=l)return s;const c=Math.floor(l/2),o=r-l+1,u=a-c;return u<s?s:u>o?o:u}function O(a,r,l){const c=F(a,r,l);return Array.from({length:l}).map((o,u)=>c+u).filter(o=>o>=s&&o<=r)}const h=e.defineComponent({name:"PaginationBar",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:u}=e.toRefs(a),n=e.ref(0),f=e.ref(o.value===!1?B:o.value[0]),N=e.ref(T),g=e.ref(z[a.language]||z[R]),m=e.ref(-1),d=e.computed(()=>f.value===C?s:Math.ceil(u.value/f.value)),w=e.computed(()=>O(n.value,d.value,N.value)),k=e.computed(()=>g.value.pageInfo.replace("#pageNumber#",n.value).replace("#totalPage#",d.value).replace("#totalRow#",u.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&&y(t,!1)});function y(t=s,_=!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===m.value)&&(n.value=v,_&&r("update:modelValue",n.value),m.value=f.value,I())}function I(){r("change",{pageNumber:n.value,pageSize:Number(f.value)})}function P(t,_,v){const i={href:"javascript:void(0)",onClick:()=>y(_)};return e.h("li",{class:t},[e.h("a",i,v)])}return e.onMounted(()=>{y(a.modelValue||s)}),c({current:n,totalPage:d,pageNumbers:w,goPage:y,reload:I}),()=>{const t=[];if(Array.isArray(o.value)&&o.value.length){const i={disabled:a.disabled,onChange:S=>{f.value=Number(S.target.value),y()}},b=o.value.map(S=>e.h("option",{value:S},S));a.displayAll&&b.push(e.h("option",{value:C},g.value.all));const G=e.h("li",{class:"v-pagination__list"},[e.h("a",{href:"javascript:void(0)"},[e.h("span",g.value.pageLength),e.h("select",i,b)])]);t.push(G)}if(a.info&&t.push(e.h("li",{class:"v-pagination__info"},[e.h("a",{href:"javascript:void(0)"},k.value)])),"default"in l){const i={pageNumber:n.value,pageSize:f.value,totalPage:d.value,totalRow:u.value,isFirst:A.value,isLast:L.value},b=e.h("li",{class:"v-pagination__slot"},[e.h("a",l.default(i))]);t.push(b)}if(a.first){const i=["v-pagination__first",{disabled:A.value}];t.push(P(i,s,g.value.first))}const _=["v-pagination__previous",{disabled:A.value}];t.push(P(_,n.value-1,g.value.previous)),a.pageNumber&&t.push(...w.value.map(i=>{const b={active:i===n.value};return P(b,i,i)}));const v=["v-pagination__next",{disabled:L.value}];if(t.push(P(v,n.value+1,g.value.next)),a.last){const i=["v-pagination__last",{disabled:L.value}];t.push(P(i,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:u,border:n,pageNumber:f,first:N,last:g,pageSizeMenu:m}=r;c&&(l.language.default=c),o&&(l.align.default=o),typeof u=="boolean"&&(l.info.default=u),typeof n=="boolean"&&(l.border.default=n),typeof f=="boolean"&&(l.pageNumber.default=f),typeof N=="boolean"&&(l.first.default=N),typeof g=="boolean"&&(l.last.default=g),typeof m<"u"&&(l.pageSizeMenu.default=m)}a.component(h.name,h)},p.PaginationBar=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:#ddd!important}.v-pagination.v-pagination--disabled .v-pagination__item a{cursor:default!important}.v-pagination.v-pagination--disabled .v-pagination__item a:hover{background-color:transparent}.v-pagination.v-pagination--disabled.v-pagination--border ul{background-color:#fafafa}.v-pagination.v-pagination--circle .v-pagination__item a{border-radius:50rem;border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item a:hover{border:1px solid #f7f7f7}.v-pagination.v-pagination--circle .v-pagination__item.disabled a:hover{border:1px solid transparent}.v-pagination.v-pagination--circle .v-pagination__item.active a{border:1px solid #ddd!important;background-color:transparent!important;box-shadow:0 1px 3px #0000001a}.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:.5rem;display:inline-flex;align-items:center;cursor:default;transition:all .3s}.v-pagination ul li.v-pagination__list a,.v-pagination ul li.v-pagination__info a{color:#888}.v-pagination ul li.active a,.v-pagination ul li.disabled a{cursor:default!important}.v-pagination ul li.v-pagination__item a:hover{background-color:#f7f7f7;cursor:pointer}.v-pagination ul li.active a{background-color:#eee!important;color:#aaa}.v-pagination ul li.disabled a{color:#ddd!important}.v-pagination ul li.disabled a:hover{background-color:transparent}.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:.5rem}.v-pagination.v-pagination--border ul li a{border:1px solid #DEE2E6;border-left:0;border-radius:0}.v-pagination.v-pagination--border ul li:first-child>a{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem;border-left:1px solid #DEE2E6}.v-pagination.v-pagination--border ul li:last-child>a{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.v-pagination.v-pagination--border ul li.active a{color:#aaa;background-color:#eee}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.VPage={},m.Vue))})(this,function(m,e){"use strict";const[w,h,O,T,F]=["cn","en","de","jp","pt"],z={[w]:{pageLength:"每页记录数",pageInfo:"第 #pageNumber#/#totalPage# 页(共#totalRow#条记录)",first:"首页",last:"尾页",all:"全部"},[h]:{pageLength:"Per page",pageInfo:"Page #pageNumber#/#totalPage# (total #totalRow# records)",first:"First",last:"Last",all:"All"},[O]:{pageLength:"Seitenlänge",pageInfo:"Aktuell #pageNumber#/#totalPage# (gesamt #totalRow# Aufzeichnungen)",first:"Zuerst",last:"Letzte",all:"Alle"},[T]:{pageLength:"ページごとの記録数",pageInfo:"現在の第 #pageNumber#/#totalPage# ページ(全部で #totalRow# 条の記録)",first:"トップページ",last:"尾のページ",all:"すべて"},[F]:{pageLength:"Resultados por página",pageInfo:"#pageNumber#/#totalPage# (total de #totalRow#)",first:"Início",last:"Fim",all:"Todos"}},s=1,M=5,S=10,E=[S,20,50,100],_=0,[X,Y,j]=["left","center","right"];function C(a,o,l){if(o<=l)return s;const c=Math.floor(l/2),u=o-l+1,r=a-c;return r<s?s:r>u?u:r}function G(a,o,l){const c=C(a,o,l);return Array.from({length:l}).map((u,r)=>c+r).filter(u=>u>=s&&u<=o)}function D(a=h){const o=String(a).toLowerCase();return z[Object.hasOwn(z,o)?o:h]}function x(a,o,l){const{pageSizeOptions:c,pageSizeMenu:u,totalRow:r}=e.toRefs(a),n=e.ref(0),b=e.ref(M),i=e.ref(a.pageSize??S),f=D(a.language),P=e.computed(()=>{if(!c.value)return[];const t=Array.isArray(u.value)&&u.value.length>0?u.value:E,d=new Set(t);return d.add(i.value),[...d].sort((p,A)=>p-A)}),g=e.computed(()=>i.value===_?s:Math.ceil(r.value/i.value)),v=e.computed(()=>G(n.value,g.value,b.value)),U=e.computed(()=>({"v-pagination":!0,"v-pagination--right":a.align==="right","v-pagination--center":a.align==="center","v-pagination--disabled":a.disabled,"v-pagination--border":a.border,"v-pagination--circle":!a.border&&a.circle})),I=e.computed(()=>n.value===s),L=e.computed(()=>n.value===g.value);e.watch(()=>a.modelValue,y),e.watch(()=>a.pageSize,R);function y(t=s){if(a.disabled||typeof t!="number")return;let d=t<s?s:t;t>g.value&&g.value>0&&(d=g.value),d!==n.value&&(n.value=d,o("update:modelValue",n.value),B())}function R(t){if(!(t<0)&&t!==i.value){if(i.value=t,o("update:pageSize",i.value),n.value===s)return B();y(s)}}function B(){o("change",{pageNumber:n.value,pageSize:Number(i.value),totalPage:g.value})}function Z(){if(!c.value)return null;const t=()=>P.value.map(p=>e.createVNode("option",{value:p,selected:i.value===p},[p])),d=()=>a.displayAll?e.createVNode("option",{value:_,selected:i.value===_},[f.all]):null;return e.createVNode("li",{class:"v-pagination__list"},[e.createVNode("a",{href:"javascript:void(0)"},[e.createVNode("span",null,[f.pageLength]),e.createVNode("select",{disabled:a.disabled,onChange:p=>R(Number(p.target.value))},[e.createVNode(t,null,null),e.createVNode(d,null,null)])])])}function k(){if(!a.info)return null;const t=f.pageInfo.replace("#pageNumber#",n.value).replace("#totalPage#",g.value).replace("#totalRow#",r.value);return e.createVNode("li",{class:"v-pagination__info"},[e.createVNode("a",{href:"javascript:void(0)"},[t])])}function q(){if(!Object.hasOwn(l,"default"))return null;const t={pageNumber:n.value,pageSize:i.value,totalPage:g.value,totalRow:r.value,isFirst:I.value,isLast:L.value};return e.createVNode("li",{class:"v-pagination__slot"},[e.createVNode("a",{href:"javascript:void(0)"},[l.default(t)])])}function V({classes:t,pageNumberValue:d,name:p,hasItem:A=!0}){return A?e.createVNode("li",{class:["v-pagination__item",...t]},[e.createVNode("a",{href:"javascript:void(0)",onClick:()=>y(d)},[p])]):null}function H(){return a.pageNumber?v.value.map(t=>e.createVNode(V,{classes:[{active:t===n.value}],pageNumberValue:t,name:t},null)):null}function J(){return e.createVNode(V,{classes:["v-pagination__first",{disabled:I.value}],pageNumberValue:s,name:f.first,hasItem:a.first},null)}function K(){return e.createVNode(V,{classes:["v-pagination__previous",{disabled:I.value}],pageNumberValue:n.value-1,name:"«"},null)}function Q(){return e.createVNode(V,{classes:["v-pagination__next",{disabled:L.value}],pageNumberValue:n.value+1,name:"»"},null)}function W(){return e.createVNode(V,{classes:["v-pagination__last",{disabled:L.value}],pageNumberValue:g.value,name:f.last,hasItem:a.last},null)}return e.onMounted(()=>y(a.modelValue||s)),{containerClasses:U,totalPage:g,current:n,pageNumbers:v,PageSizeOptions:Z,PageInformation:k,PageSlot:q,PageNumberItems:H,FirstPageItem:J,PreviousPageItem:K,NextPageItem:Q,LastPageItem:W}}const N=e.defineComponent({name:"PaginationBar",props:{modelValue:{type:Number,default:0},pageSize:{type:Number,default:S},totalRow:{type:Number,default:0},language:{type:String,default:h},align:{type:String,default:j},pageSizeMenu:{type:[Array],default:()=>E},pageSizeOptions:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},circle:{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:l}){const{containerClasses:c,totalPage:u,PageSizeOptions:r,PageInformation:n,PageSlot:b,PageNumberItems:i,FirstPageItem:f,PreviousPageItem:P,NextPageItem:g,LastPageItem:v}=x(a,o,l);return()=>a.hideOnSinglePage&&u.value<=1?null:e.createVNode("div",{class:c.value},[e.createVNode("ul",null,[e.createVNode(r,null,null),e.createVNode(n,null,null),e.createVNode(b,null,null),e.createVNode(f,null,null),e.createVNode(P,null,null),e.createVNode(i,null,null),e.createVNode(g,null,null),e.createVNode(v,null,null)])])}});N.install=(a,o={})=>{if(Object.keys(o).length){const{props:l}=N,{language:c,align:u,info:r,border:n,pageNumber:b,first:i,last:f,pageSizeMenu:P}=o;c&&(l.language.default=c),u&&(l.align.default=u),typeof r=="boolean"&&(l.info.default=r),typeof n=="boolean"&&(l.border.default=n),typeof b=="boolean"&&(l.pageNumber.default=b),typeof i=="boolean"&&(l.first.default=i),typeof f=="boolean"&&(l.last.default=f),typeof P<"u"&&(l.pageSizeMenu.default=P)}a.component(N.name,N)},m.PaginationBar=N,m.default=N,Object.defineProperties(m,{__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",
+  "version": "3.2.0",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [
@@ -47,27 +47,26 @@
     "pagination"
   ],
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.4.0"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitest/coverage-v8": "^2.1.3",
     "@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",
-    "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"
+    "jsdom": "^25.0.1",
+    "sass": "^1.80.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^2.1.3"
   }
 }

package/types/index.d.ts

@@ -8,6 +8,7 @@ import {
 export declare interface PageInfo {
   pageNumber: number
   pageSize: number
+  totalPage: number
 }
 
 export declare interface PageSlotData {
@@ -31,21 +32,31 @@ declare interface Props {
    * The number of total record
    */
   totalRow: number
+  /**
+   * The number of page size
+   * @default 10
+   */
+  pageSize?: number
   /**
    * v-page language
    * @default `en`
    */
-  language?: string
+  language?: 'cn' | 'en' | 'de' | 'jp' | 'pt'
   /**
    * 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`
    */
-  align?: string
+  align?: 'left' | 'right' | 'center'
   /**
    * Disabled the pagination
    * @default false
@@ -57,7 +68,12 @@ declare interface Props {
    */
   border?: boolean
   /**
-   * Whether to display page info bar
+   * Round style page number button
+   * @default false
+   */
+  circle?: boolean
+  /**
+   * Whether to display page information panel
    * @default true
    */
   info?: boolean
@@ -81,25 +97,24 @@ declare interface Props {
    * @default false
    */
   displayAll?: boolean
+  /**
+   * Hide pagination when only have one page
+   * @default false
+   */
+  hideOnSinglePage?: boolean
 }
 
-declare interface Emits {
-  /** Update pageNumber value */
-  'onUpdate:modelValue'?: (pageNumber: number) => void
-  /** The event respond pageNumber or pageSize change */
-  onChange?: (data: PageInfo) => void
-}
-
-// 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
-// }
+/** Update pageNumber value */
+type EmitUpdateModelValue = (event: "update:modelValue", value: number) => void
+/** Update pageSize value */
+type EmitUpdatePageSize = (event: "update:pageSize", 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 & Emits
+    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & Props
+    $emit: EmitUpdateModelValue & EmitUpdatePageSize & EmitChange
     $slots: {
       default?: (defaultSlotData: PageSlotData) => VNode[]
     }